Получить конический градиент Polyfill для работы с Vue - PullRequest
Новая
       33

Получить конический градиент Polyfill для работы с Vue

0 голосов
/ 01 мая 2018

Я пытаюсь реализовать этот Polyfill в моем проекте 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 с коническим градиентом в мой проект (yarn add conic-gradient), который извлекает как скрипт с коническим градиентом, так и необходимый префикс.

Затем я попытался выполнить сухой импорт в моем файле main.js: 

import 'conic-gradient'

а также 

import conic-gradient from 'conic-gradient'

и затем звоните: 

Vue.use(conic-gradient

Я также пробовал сухой импорт в моем компоненте (dome.vue)

Однако, похоже, ничто не создает конического градиента. Что я делаю неправильно?

1 Ответ

0 голосов
/ 01 мая 2018

Conic-Gradient не является плагином 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/vue@2.5.16"></script>

<div id="app">
  <img :src="gradient.png" style="border-radius: 50%" />
</div>
...