转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不常用最好是上网查查,用法和功能。
在html部分
div id="wheel_surf" div 幸运大转盘 /div div div div div @click="rotate_handle()" : /div /div div : div div v-for="(item,index) in prize_list" :key="index" div v-if="item.icon" img :src="item.icon" / /div div {{item.name}} /div /div /div /div /div /div div v-transfer-dom x-dialog v-model="showHideOnBlur" hide-on-blur div div v-show="val == 7" p 谢谢参与!祝您下次好运 /p /div div v-show="val !== 7" p 恭喜你 /p img :src="imgActive" / p {{item.rewardDesc}} /p // 获奖返回值 /div /div div @click="showHideOnBlur=false" span /span /div /x-dialog /div /div
总结
以上所述是小编给大家介绍的Vue 幸运大转盘实现思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!