基于Vue.js的轮盘抽奖(布局与逻辑)

基于Vue.js的轮盘抽奖

记录一下使用心得,这里不再废话,直接上代码好吧~

目录

  • 基于Vue.js的轮盘抽奖
      • 1. html
      • 2. data()
      • 3. 轮盘逻辑
      • 4. 点击事件触发

1. html

// 轮盘抽奖
<div class="lottery posRel">
	<div
	class="rotate posAbs"
	:style="{transform:rotate_angle,transition:rotate_transition}"
	>
	//轮盘图片
		<img
		src=""
		class="disImg"
		/>
	</div>
	//指针图片
	<img
	src=""
	class="startButton posAbs"
	@click="startFn()"
	/>
</div>

2. data()

start_rotating_degree: 0, // 初始旋转角度
rotate_angle: 0, // 将要旋转的角度
start_rotating_degree_pointer: 0, // 指针初始旋转角度
rotate_angle_pointer: 0, // 指针将要旋转的度数
rotate_transition: "transform 7s ease-in-out", // 初始化选中的过度属性控制
click_flag: true, // 是否可以旋转抽奖

3. 轮盘逻辑

rotating(index) {
     
        if (!this.click_flag) return;
        let duringTime = 6; // 默认为1s
        let resultAngle = [0, 300, 240, 180, 120, 60]; // 最终会旋转到下标的位置所需要的度数  [0, 45, 88, 135, 180, 225, 270, 315, 0]
        let random = Math.floor(Math.random() * 6);
        this.click_flag = false; // 旋转结束前,不允许再次触发
        // 转动盘子
        let rotateAngle =
          this.start_rotating_degree +
          (random + 8) * 360 +
          resultAngle[index] -
          (this.start_rotating_degree % 360);
        this.start_rotating_degree = rotateAngle;
        this.rotate_angle = `rotate(${
       rotateAngle}deg)`;
        let self = this;
        // 旋转结束后,允许再次触发
        setTimeout(() => {
     
          self.click_flag = true;
        }, duringTime * 1000 + 1000); // 延时,保证转盘转完
      }

4. 点击事件触发

startFn() {
     
	this.rotating(0);
}

好了,到这里基本就可以用了。样式的话太简单就不加上去了,自行添加吧。觉得好用的话点个赞+收藏二连~~。 希望可以帮到大家。

你可能感兴趣的:(Vue,vue,js)