效果图

Demo

Demo

说明：这是基于vue开发的转盘抽奖组件。

1. 安装&使用

• 安装

npm install v-luck-draw

• 使用

//方法1
import LuckDraw from 'v-luck-draw'
Vue.use(LuckDraw);
 
//方法2
import { LuckDraw } from 'v-luck-draw'
Vue.component("LuckDraw", LuckDraw);
 
//方法3 假设是test.vue文件 <script>标签内使用局部注册LuckDraw组件
import { LuckDraw } from 'v-luck-draw'
export default {
    components: {
        LuckDraw
    }
}

2. 例子

• 代码

<template>
    <div class="demo">
        <luck-draw ref="luckDraw" :prizes="prizes" @start="onStart" @finish="onFinish" />
        <div style="padding:10px;">抽中奖品：{{ prize&&prize.text||"尚未抽奖" }}</div>
        <button @click="onStopClick">停止抽奖</button>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            prize: null,
            prizes: [
                {
                    text: '100元', // 奖品名称
                    icon: '/img/icon.png', // 图标，如果没有则不显示
                },
                { text: '10元', icon: '/img/icon.png' },
                { text: '1000元', icon: '/img/icon.png' },
                { text: '2元', icon: '/img/icon.png' },
                { text: '1元', icon: '/img/icon.png' },
                { text: '0.5元', icon: '/img/icon.png' },
                { text: '0.5元', icon: '/img/icon.png' },
                { text: '0.5元', icon: '/img/icon.png' },
            ],
        };
    },
    methods: {
        // 点击了开始抽奖
        onStart() {
            // 模拟200ms后请求到中奖奖品
            setTimeout(() => {
            // 调用check方法，选中一个奖品索引
                this.$refs.luckDraw.check(2);
            }, 200);
        },
        // 抽中奖品，并且停止转盘后调用
        onFinish(index) {
            this.prize = this.prizes[index];
        },
        onStopClick() {
            // 主动调用stop方法停止转盘转动，在请求中奖奖品的接口出异常时调用
            this.$refs.luckDraw.stop();
        },
    },
};
</script> 

3. props

属性	说明	类型	默认值
size	转盘大小	Number	300
prizes	奖品列表，是一个数组，数组元素包含属性text：奖品名称；icon：奖品图标（可选）	Array	-
fontSize	奖品名称字体大小	Number	16
iconWidth	icon：奖品图标宽度	Number	25
borderWidth	转盘外圈与内圈直接的圆环宽度	Number	22
dotCount	转盘外圈上的圆点个数	Number	24
dotRadius	转盘外圈上的圆点半径	Number	4
dotColors	转盘外圈上的圆点颜色，是一个颜色字符串数组	Array	['#FEE200', '#FFF']
fanneColors	转盘内圈奖品扇形背景颜色，是一个颜色字符串数组	Array	['#ffd428', '#fff68b']
btnSize	“立即抽奖”按钮大小	Number	40

4. 事件

事件名称	参数	说明
start	-	点击“立即抽奖”按钮时触发
finish	index	抽中奖品，并停止转盘转动时触发，会回调一个index参数，该参数表示抽中的奖品索引

5. 方法

提示：给luck-draw组件增加ref属性可获取组件的Vue实例，拿到实例后可执行下面的方法。例如：

<luck-draw ref="luckDraw" />

export default {
    mounted() {
        let luckDraw = this.$refs.luckDraw;
        // 当用户点击“立即抽奖”按钮时，若请求“抽中奖品的索引”的接口出现异常时，可以调用stop方法停止转盘转动
        luckDraw.stop();
    }
}

方法名	说明
stop	执行此方法，可以停止转盘转动。