如何用Vue组件打造移动端长尾词九宫格互动抽奖？

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

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

大师分享了vue组件，实现移动端九宫格转盘抽奖功能，代码详尽，接口决定奖品数据。+效果展示+抽奖体验

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

vue-lucky-draw

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

效果图

抽奖

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

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