如何用Vue组件开发移动端九宫格抽奖转盘？

本文共计820个文字，预计阅读时间需要4分钟。

原文：本文字例为大家庭分享了vue组件实现移动端九宫格转盘抽奖的具体代码，供大家参考，具体内容如下+vue-lucky-draw+移动端九宫格转盘抽奖vue组件，中奖的奖品数据由接口决定。+效果图+抽奖

改写后：大家庭分享了使用vue组件实现的移动端九宫格转盘抽奖代码，供参考。组件实现九宫格转盘抽奖，奖品数据由接口提供。附效果展示及抽奖功能。

本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码，供大家参考，具体内容如下

vue-lucky-draw

移动端九宫格转盘抽奖vue组件，中奖的奖品数据由接口决定。

效果图

抽奖

因为中奖的结果是后台返回的，所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置，也就是要模拟出这个中奖的过程（所以所谓的抽奖都是骗人的，嘿嘿）。先要写出移动的背景框对应的各个位置的css，然后动态切换class来使其呈现出转动效果。明白了过程就好写了。

中间的按钮用的是css3的animation，我这个奖品是合在了一张图上，你也可以分开成8张小图，那样需要写更多的样式。