wheel929 v1.0.7

wheel-component(轮盘组件)

自定义封装轮盘组件，常用于轮盘抽奖活动等适合的业务场景。

下载依赖

npm install wheel929

打包组件

npm run lib

上传组件前登陆

npm login

上传组件

npm publish

使用前引入

import wheel from 'wheel929'
import 'wheel929/lib/wheel.css'
Vue.use(wheel)

使用规范

 <wheel
        :wheelWidth="400"
        :wheelHeight="400"
        :dataList="prizeData"
        :wheelImg="wheelImg"
        :pointImg="pointImg"
        @rotateStop="wheelCallBack"
        @rotateRegular="startRotate"
      >
        <template v-slot="props">
          <img class="prize-img" :src="props.prize.icon" />
          <div class="prize-name">
            {{ props.prize.name }}
          </div>
        </template>
      </wheel>

传递参数说明

wheelWidth(必传)
type: Number
required: true

wheelHeight(必传)
type: Number
required: true

wheelImg(必传) // 轮盘背景图
type:object

pointImg(必传) // 轮盘指针背景图
type:object

rotateStop(endIndex, count) (必传) // 旋转停止时的回调函数
type:function
param:
endIndex//停止时的数据下标
count //剩余可旋转的次数

rotateRegula(callBack)  (必传) //旋转前的钩子函数
type:function
param：callBack(isStart:boolean,targetIndex: number)
//isStart:boolean：是否开始。targetIndex: number:传入结果的下标，如果不传入则执行随机

rotateCount  // 可旋转次数
type: Number
default: 10

duration  // 旋转时间
type: Number
default: 3000

circleCount // 选择圈数
type: Number
default: 10

实例 demo

  wheelCallBack(endIndex, count) {
      console.log(
        "子组件传入的回调方法,回调参数为最后的结果index下标",
        endIndex, count
      );
    },
    startRotate(callBack) {
      console.log(
        "点击开始，有一个回调函数，其中有两个参数，第一个是否执行旋转操作，第二个是传递的最后结果Index，如果不传递，执行随机"
      );
      callBack(true, 4);
    },