# 在 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: '50px', background: '#617df2' },
        { radius: '45px', background: '#afc8ff' },
        {
          radius: '40px', background: '#869cfa',
          pointer: true,
          fonts: [{ text: '开始\n抽奖', top: '-20px' }]
        },
      ],
    }
  },
  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 安装所有依赖

如果还是无法使用, 那还有一个备选方案, 就是使用下面方式2的CDN链接 (经过验证, CDN链接可以避免依赖问题)

如果你出于某种原因不想或不能使用CDN, 你也可以直接跳转 ->【在 JS / TS 中使用】(这个包不会出现依赖问题, 因为他没有任何依赖)

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

CDN 链接：

URL有点长不用担心, 因为是个合并链接, 就正常使用即可 (记得要在你的vue脚本后面引入)