更新记录

1.0.0（2022-11-02）

1、大转盘抽奖组件。

平台兼容性

大转盘抽奖组件

一、介绍

使用canvas组件实现大转盘抽奖功能，目前仅测试了微信小程序，请谨慎使用。

二、Api

大转盘抽奖组件具有以下属性和事件：

2.1 bugking7-bigTurntable Props

2.2 bugking7-bigTurntable Events

三、示例

<bugking7-bigTurntable 
   ref="bigTurn" 
   :bigTurntableList="bigTurntableList" 
   :bigTurnEndAnimationType="1" 
   :bigTurntableHeight="380"
   bigTurnTextField="text" 
   bigTurnIdField="id" 
   @bigTurnStart="handleStart" 
   @bigTurnEnd="handleEnd">
</bugking7-bigTurntable>

export default {
        data() {
            return {
                bigTurntableList: [{
                        "text": "美团外卖红包",
                        "id": "mtwm"
                    },
                    {
                        "text": "拼多多优惠券",
                        "id": "pddyhq"
                    },
                    {
                        "text": "谢谢参与",
                        "id": "xxcy",
                    },
                    {
                        "text": "京东双11红包",
                        "id": "jdhb"
                    },
                    {
                        "text": "天猫双11红包",
                        "id": "tmhb"
                    },
                    {
                        "text": "拼多多现金红包",
                        "id": "pddhb"
                    }
                ],
                text: ''
            }
        },

        methods: {
            handleStart(e) {
                console.log('抽奖开始了', e)
                const randIndex = this.getRand(0, this.bigTurntableList.length - 1)
                const resultObj = this.bigTurntableList[randIndex]

                //模拟网络请求获取抽奖结果信息
                setTimeout(() => {
                    //此方法通知大转盘抽奖结束了
                    this.$refs.bigTurn.queryBigTurntableResult(resultObj)
                }, 300)
            },
            handleEnd(e) {
                this.text = e.result.text
                console.log('抽奖结束了', e)
            },
            // 获取随机数
            getRand(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min
            },
        }
    }

四、友情链接

二次元、动漫、游戏、cos、美女等壁纸免费下载，欢迎扫码体验

短视频免费去水印、藏头诗生成、星座运势、星座配对等，欢迎扫码体验

每日精选星座推文、在线客服，欢迎扫码关注