# 在 Vue 中使用

下面我提供了一个大转盘的简易 Demo, 你可以用来测试. 至于其他抽奖类型或更多的效果, 可以跳转示例页面进行查看

# 方式 1：通过 import 引入

# 1. 首先安装插件

# npm 安装
npm install @lucky-canvas/vue@latest

# 或者 yarn 安装
yarn add @lucky-canvas/vue@latest

# 2. 然后找到 `main.js` 引入插件并 `use`

# 3. 最后在组件内使用

<template>
  <LuckyWheel
    ref="myLucky"
    width="300px"
    height="300px"
    :prizes="prizes"
    :blocks="blocks"
    :buttons="buttons"
    @start="startCallback"
    @end="endCallback"
  />
</template>

<script>
export default {
  data () {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { fonts: [{ text: '0', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '1', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '2', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '3', top: '10%' }], background: '#b8c5f2' },
        { fonts: [{ text: '4', top: '10%' }], background: '#e9e8fe' },
        { fonts: [{ text: '5', top: '10%' }], background: '#b8c5f2' },
      ],
      buttons: [{
        radius: '35%',
        background: '#8a9bf3',
        pointer: true,
        fonts: [{ text: '开始', top: '-10px' }]
      }],
    }
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = 0
        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
}
</script>

友情提示

极少的情况下, 可能会出现安装/打包失败 https://github.com/buuing/lucky-canvas/issues/258 (opens new window)
目前推测可能是依赖安装问题导致的, 建议切换 node@12.22.7
然后删除 node_modules 和 **-lock.json 这两个文件
然后再次尝试 npm install 安装所有依赖

如果还是无法使用, 你可以直接跳转 ->【在 JS / TS 中使用】并查看方式2(这个包不会出现依赖问题, 因为他没有任何依赖)

# 方式 2：通过 script 标签引入

CDN 链接：

Vue2.x： (下面三个链接依次引入)
Vue3.x： (下面两个链接依次引入)
- https://unpkg.com/vue-demi@0.11.4
- https://unpkg.com/@lucky-canvas/vue@0.1.11

为啥引入这么多? 因为 vue2 和 vue3 有生殖隔离