v-luck-draw v0.1.2

效果图

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

4. 事件

5. 方法

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

<luck-draw ref="luckDraw" />

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