获取锥形梯度 polyfill 以与 Vue 一起工作

Question

我正在尝试在我的 Vue.js 项目中实施 this Polyfill：

<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 和单个文件组件和 webpack。

描述看起来很简单，包括两个脚本标签并且很有效。

我已经将 conic-gradient NPM 包添加到我的项目中 (yarn add conic-gradient)，它获取 conic-gradient 脚本以及所需的 prefixfree。

然后我继续尝试在我的 main.js 中进行干导入：

import 'conic-gradient'

以及

import conic-gradient from 'conic-gradient'

然后调用：

Vue.use(conic-gradient

我也在我的组件中尝试了干式导入 (dome.vue)

然而，似乎没有什么可以呈现圆锥渐变。我究竟做错了什么？

Answer 1

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>

获取锥形梯度 polyfill 以与 Vue 一起工作

Get conic-gradient polyfill to work with Vue

javascript

polyfills

vue.js

vue-component

vuejs2

一个工作片段