vue简单实现转盘抽奖

这篇文章主要为大家详细介绍了vue简单实现转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue简单实现转盘抽奖的具体代码，供大家参考，具体内容如下

1.0 思路整理

转盘抽奖很常见，之前也没写过，现在有空来写写，分析如下：

1.1 转盘旋转 ----- 可以用 transform 的 rotate 来解决

1.2 旋转动画 ----- transition 过渡来处理

1.3 停留目标位置及中奖提示 ？ ------ 通过控制旋转角度控制停留位置，中奖提示，考虑添加回调

1.1 开始行动

上面的思考，我们知道了大概要实现的步骤，首先我们搞张图片

这个圆盘有 10 份，每一份 360/10 = 36deg，假设要停留在第二个---->20金币，顺时针（含初始位置并计为1），即 共需要旋转 (2 - 1)* 36 = 36，这样，我们可以得出，停留位置需要旋转的角度 = (target - 1)*36。

1.2 中奖回调

上面的步骤，我们知道了如何控制到目标位置，那接下来就是事件通知，起初想的是，固定转动时间，然后开启定时器计时，很显然不靠谱，有没有什么可以在动画结束后就通知呢？transitionend，我找到了这个事件，可以监听元素动画结束事件，只不过有些兼容 这个好办

/**动画结束事件兼容**/whichTransitionEvent(){    let el = document.createElement('span'),    transitions = {        'transition':'transitionend',        'OTransition':'oTransitionEnd',        'MozTransition':'transitionend',        'WebkitTransition':'webkitTransitionEnd'    };    for(let t in transitions){        if( el.style[t] !== undefined ){            return transitions[t];        }    }    el = null;}

2.0 完整示例

控制转动位置和事件通知都找到方法了，接下来开干！

栗子：

完整代码

<template>    <div>        <h3>转盘抽奖</h3>        <div >            <img ref="rotImg" src="../assets/zhuan.png" alt="">            <div>                <div ></div>            </div>        </div>        <button @click="toDraw" >点击抽奖</button>    </div></template><script>export default {    name:'rotaryDraw',    data() {        return {            rotate: 0,            resetRotate: 0,            hitId: 1,// 1-10            drawStatus: false        }    },    async mounted() {        await this.$nextTick();        let evenTransition = this.whichTransitionEvent();        let img = this.$refs.rotImg;        let that = this;        const hitAre = [ '30M流量包','20金币','20M流量包','10M流量包','5金币',            '谢谢参与','10金币','50M流量包','2金币','100M流量包'        ];        // 监听 动画结束         img.addEventListener(evenTransition,tranHand,false);        function tranHand() {            // 复位            that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;            img.style.transition = "none 0s ease 0s";            img.style.transform = `rotate(${that.resetRotate}deg)`;             alert(`抽奖结果【 ${hitAre[that.hitId - 1]} 】`);            that.drawStatus = false        }    },    methods: {        start() {            this.$refs.rotImg.style.transition = "all 3s ease 0s";            this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;        },        toDraw() {            if(this.drawStatus){                console.log('正在抽奖中');                return            }            // 标记状态            this.drawStatus = true            /**             * 圆盘共 10 份 每份 36度, 停位置(id)度数 (id - 1)*36              * 基数 3圈 360*4             * this.rotate 当前角度             * **/&nb