vue转盘抽奖布局实现
Vue 转盘抽奖布局实现
基本思路
转盘抽奖的核心是通过 CSS 和 JavaScript 实现一个可旋转的圆盘，配合 Vue 的数据驱动特性动态控制奖品列表和旋转动画。关键点包括圆盘的扇形分割、旋转动画触发和结果回调。
实现步骤
1. 数据结构设计
data() {
return {
prizes: [
{ id: 1, name: "奖品1", color: "#FF5252" },
{ id: 2, name: "奖品2", color: "#FF4081" },
// ...更多奖品
],
rotating: false,
resultIndex: 0
}
}2. 转盘布局模板
<div class="wheel-container">
<div
class="wheel"
:style="{ transform: `rotate(${currentAngle}deg)` }"
@click="startRotate"
>
<div
v-for="(prize, index) in prizes"
:key="prize.id"
class="sector"
:style="{
backgroundColor: prize.color,
transform: `rotate(${(360 / prizes.length) * index}deg)`
}"
>
<span class="prize-text">{{ prize.name }}</span>
</div>
</div>
</div>3. CSS 样式
.wheel-container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.sector {
position: absolute;
width: 50%;
height: 50%;
left: 0;
top: 0;
transform-origin: right bottom;
}
.prize-text {
position: absolute;
left: 30%;
top: 10%;
transform: rotate(45deg);
color: white;
font-weight: bold;
}4. 旋转逻辑实现
methods: {
startRotate() {
if (this.rotating) return;
this.rotating = true;
// 随机选择结果（实际项目应通过接口获取）
this.resultIndex = Math.floor(Math.random() * this.prizes.length);
// 计算目标角度（多转几圈后停在目标位置）
const sectorAngle = 360 / this.prizes.length;
const targetAngle = 360 * 5 + (360 - sectorAngle * this.resultIndex);
this.currentAngle = targetAngle;
setTimeout(() => {
this.rotating = false;
alert(`恭喜获得：${this.prizes[this.resultIndex].name}`);
}, 4000);
}
}进阶优化
添加指针元素 在转盘中心添加固定指针：
<div class="pointer"></div>.pointer {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid #333;
z-index: 10;
}平滑停止动画
使用 CSS 的 transition-timing-function 实现先快后慢的缓动效果：
.wheel {
transition-timing-function: cubic-bezier(0.17, 0.67, 0.12, 0.99);
}响应式设计 通过计算属性动态调整大小：
computed: {
wheelSize() {
return Math.min(window.innerWidth, window.innerHeight) * 0.8;
}
}注意事项
- 奖品数量变化时需要重新计算每个扇区的角度
- 移动端需要考虑触摸事件支持
- 实际项目应将抽奖结果通过接口与后端交互
- 旋转动画时间应根据实际需求调整
