Получите полифил с коническим градиентом для работы с Vue
Я пытаюсь реализовать этот полифилл в моем проекте Vue.js:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src = "conic-gradient.js"></script>
Я использую Vue, созданный с помощью Vue-CLI, с однофайловыми компонентами и веб-пакетом.
Описание кажется таким простым, добавьте два тега скрипта и бац, оно работает.
Я добавил в свой проект NPM-пакет conic-gradient (yarn add conic-gradient), который извлекает как сценарий conic-gradient, так и требуемый prefixfree.
Затем я попробовал выполнить сухой импорт в своем main.js:
import 'conic-gradient'
также как и
import conic-gradient from 'conic-gradient'
а затем позвонив:
Vue.use(conic-gradient
Я также пробовал сухой импорт в моем компоненте (Dome.vue)
Однако, похоже, ничто не отображает конический градиент. Что я делаю неправильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Конический градиент не является плагином Vue, поэтому вы не можете просто сделать с ним Vue.use.
Ни модуля ES6 (извините за позднее уведомление), поэтому вы не можете использовать import ConicGradient..., автор опубликовал неудачный пакет npm.
Поскольку вы сказали, что ваш проект был создан с помощью Vue-CLI, вы должны найти файл src/main.js и поместить свой import ConicGradient from 'conic-gradient' в его верх.
И вы можете начать использовать это как
import ConicGradient from 'conic-gradient'
new Vue({
data: {
gradient: new ConicGradient({
stops: 'gold 40%, #f06 0',
repeating: true,
size: 400
});
}
})
Перейдите к своему index.html и вставьте его непосредственно перед закрывающим тегом вашего тела </body> (загрузите этот файл и вместо этого предоставьте локальную копию)
<script src = "https://cdn.rawgit.com/LeaVerou/conic-gradient/609dc5f4/conic-gradient.js"></script>
Теперь в ваших компонентах Vue вы можете использовать new window.ConicGradient({ ... })
Рабочий фрагмент
Vue.config.productionTip = Vue.config.devtools = false
new Vue({
el: '#app',
data: {
gradient: new window.ConicGradient({
stops: 'red, yellow, lime, aqua, blue, magenta, red',
size: 100
})
}
})<script src = "https://cdn.rawgit.com/LeaVerou/conic-gradient/609dc5f4/conic-gradient.js"></script>
<script src = "https://unpkg.com/[email protected]"></script>
<div id = "app">
<img :src = "gradient.png" style = "border-radius: 50%" />
</div>Вы просто импортируете его в компоненты, которые вам нужны. Если вы используете его не в файле main.js, а в другом компоненте, не импортируйте его в файл main.js. Хотя вы обнаружите, что «импортируете» его в различные компоненты, здесь отвечает webpack, и код не будет «повторяться». Импортировано много раз, но загрузился только один раз. Так работают модули ES6!
если я это сделаю: импортировать ConicGradient из 'conic-gradient' экспорт по умолчанию {имя: 'купол', data () {return {gradient: new ConicGradient ({stop: 'gold 40%, # f06 0'})}}} I получить сообщение об ошибке [Vue warn]: Error in data (): "TypeError: __WEBPACK_IMPORTED_MODULE_0_conic_gradient ___ default.a не является конструктором"
Моя беда, я не понимал, что пакет не был готов для es6. Он опубликован в реестре npm, но вы не можете импортировать его как модуль es6. Я только что отредактировал свой ответ другим подходом
Не решает проблему в css, но теперь работает в js, что тоже работает
Это происходит из-за того, что элементы монтируются после того, как библиотека вводит "полифил css", как мне кажется. Вам также необходимо знать, что вы используете webpack в своем проекте, созданном с помощью cli. Так что вам лучше поискать решение webpack для css.
Итак, мне нужно выполнить импорт в main.js, а также в каждом компоненте, в котором я его использую? Я не хочу заливать свой файл main.js разными градиентами, которые я использую во всем приложении.