移动vue大转盘抽奖

近期做大转盘的抽奖的形式，需要动态奖品的数量，之前计划写源生的js和css实现，相对来说是比较困难的，最好的办法还是利用canvas操作。

最近找到vue的canvas开源的插件，很高校的解决了整个问题。数据是我随便写的，应该可以执行。可能有点丑，后期样式自己随便调。

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

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

main.js全局引入

import VueLuckyCanvas from '@lucky-canvas/vue'
Vue.use(VueLuckyCanvas)

 /*** 按需引入*/

import { LuckyWheel, LuckyGrid } from '@lucky-canvas/vue'
// 大转盘抽奖
Vue.components('LuckyWheel', LuckyWheel)

界面中直接

 <LuckyWheel

          class="luck-draw"

          ref="LuckyWheel"

          width="340px"

          height="340px"

          :blocks="blocks"

          :prizes="prizes"

          :buttons="buttons"

          :default-style="defaultStyle"

          :default-config="defaultConfig"

          @start="startCallBack"

          @end="endCallBack"

       

blocks	背景配置
buttons	按钮的配置
default-style	默认样式
default-config	默认配置
prizes	奖品的配置

/>

配置选项全部在data中设置

data(){
    return{
        blocks: [{ padding: '10px', background: '#869cfa' }],
        prizes: [
        { fonts: [{ text: '0' }], background: '#e9e8fe' },
        { fonts: [{ text: '1' }], background: '#b8c5f2' },
        { fonts: [{ text: '2' }], background: '#e9e8fe' },
        { fonts: [{ text: '3' }], background: '#b8c5f2' },
        { fonts: [{ text: '4' }], background: '#e9e8fe' },
        { fonts: [{ text: '5' }], background: '#b8c5f2' },
      ],
       defaultStyle: {
        fontColor: '#303133',
        fontSize: '10px',
        lengthLimit:98,
      },
      defaultConfig: {
        gutter: '1px',
      },
   }
}

startCallBack	按钮点击执行事件
endCallBack	旋转结果执行事件

执行转盘旋转的方法：

 this.$refs.LuckyWheel.play();

执行转盘结束和定在位置的操作：index是奖品数组的序列号

  this.$refs.LuckyWheel.stop(index);