如何用Vue轻松实现长尾词形式的转盘抽奖功能？

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

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

+1.0 思路整理 + 转盘抽奖非常常见，之前也没有写过，现在有空来写写，分析如下：

+1.1 转盘转动 +

改写后：

本例分享Vue简单实现转盘抽奖的代码，供大家参考。内容概述如下：

+1.0 设计思路 + 转盘抽奖应用广泛，此前未曾编写，现利用空闲时间进行尝试，分析如下：

+1.1 转盘转动机制 +

本文实例为大家分享了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。