vue写抽奖大转盘

圆盘抽取活动我是用的第三方插件写的，叫lucky-canvas工具
https://100px.net/
npm安装：

npm install @lucky-canvas/vue@latest

在全局中引入：

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

这个网站提供了js、vue、react和微信小程序等方法中使用，需要的都可以参考

当我们刚进入页面就是这样子，啥也没有，因为我们需要调接口展示转盘数据的。

选择数据后右侧转盘会自动填充数据

抽取结束后会自动填充表格中并将表格中这条数据禁用

具体代码如下：

<LuckyWheel
    width="250px"
    height="250px"
    :blocks="blocks"
    :prizes="prizes"
    :buttons="buttons"
    :defaultConfig="defaultConfig"
    @start="startCallBack"
    @end="endCallBack"
     ref="myLucky"
 />

在data中定义：

  		blocks: [{ padding: '10px', background: '#869cfa' }],
        prizes: [],//用来接收转盘的数据
        buttons: [
          { radius: '50%', background: '#617df2' },
          { radius: '45%', background: '#afc8ff' },
          {
            radius: '40%', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始\n抽取', top: '-20px' }]
          },
        ],
        defaultConfig: {
          stopRange: 0.5
        }

js部分：

startCallBack () {//转盘开始转动
//我判断了一下，如果转盘没数据我就提示先选择数据
      if(this.prizes .length == 0){
          this.$message.warning("请先选择主营范围和填写主（备）供应商")
          return
      }else{
          // 开始游戏
        this.$refs.myLucky.play()
        // 假设接口的请求速度是5s
        setTimeout(() => {
          // 5s后拿到后端返回的中奖索引
          const index = 0
          // 然后停止游戏 (缓慢停止)
          this.$refs.myLucky.stop(index)
        }, 3000)
      }
    },
    endCallBack (prize) {
    //转盘停止后将抽取到的数据重组一下数组，放到table表格内去
      this.$set(this.tableData[this.indexNumber],"text",prize.fonts[0].text)
      this.screenData = prize.id
      var iMun = parseInt(this.indexNumber)
      this.paize2.push({
              sort:iMun,
              comId:this.screenData
            })
    },
    //初始化方法获取转盘的数据来展示到转盘中（由于项目需求不同，所需要的获取数据方法不同）
    handelChange(){
      var ids = {socreId:this.fanwei}
        getscopeSum(ids).then((res)=>{
          this.prizes=[]
          if(res.code ===200){
            this.sumNumber = res.data.num
            this.zhuanpan = res.data.sups
            this.zhuanpan.forEach((item,index)=>{
              if(index%2 === 0){
                let obj ={fonts: [{ text: item.supName, top: 20,fontSize:14 }], wordWarp:true , background: '#e9e8fe',id:item.id }
                this.prizes.push(obj)
              }else{
              let obj ={ fonts: [{ text: item.supName, top: 20,fontSize:14 }], wordWarp:true , background: '#b8c5f2',id:item.id }
                this.prizes .push(obj)
              }
            })
          }
        })
    },

这就是抽奖大转盘的总结，有疑问的地方可以提出，我会即使改正和回复大家。