Can vuejs make a turntable?

vuejs can make a turntable, and the implementation method is: 1. Create a lottery button; 2. Get the position where the turntable should stop; 3. Interact with the background; 4. Stop at the place set in step 2 after the animation ends; 5. Set the prompt to unlock the prize winning function.

The operating environment of this article: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

Can vuejs make turntables?

Configurable circular lottery turntable component in Vue

1. Analysis of the entire lottery process:

1. Clicked the pointer in the middle of the turntable (i.e. start lottery button), determine whether it can be rotated (the specific logic is encapsulated in canBeRotated()--① Whether the number of draws currently owned is greater than 0 ② Whether it is currently rotating (locked)), determine If passed, proceed to the next step, otherwise a corresponding prompt will pop up.
2. Get the position where the turntable should stop and interact with the background, but this is only for demonstration purposes, and 0~5 is randomly selected locally.
3. After successfully interacting with the background to obtain the stopping position, lock the turntable and reduce the number of draws.
4. Tell the turntable component to start rotating and stop at the place set in step 2 after the animation ends.
5. The turntable rotates and stops at the place set in step 3 before prompting for winning and unlocking.

2. What needs to be done for the circular lottery wheel component

1. You can customize the background color and outer border color of each wheel. (turntableStyleOptionproperty)
2. The size and position of the turntable. (When calling, add a class to the component, which is turntable in the code)
3. Customize the number of turns the turntable needs to make when it is running. (rotateCircleproperty)
4. You can customize the duration of the running animation. (duringTime attribute)
5. Displays the position of each turntable by receiving the prize information (prizeData) passed by the parent component. (Calculate the angle to be rotated based on the center of the circle getRotateAngle() method)
6. Method that starts rotating after being called by the parent component and stops at the specified position (rotate ), telling the parent component that it has stopped after ending the animation.
7. The name and picture of the prize can be customized.

3. Page preview

4. Basic usage

1. Quote

import roundTurntable from './components/roundTurntable';

2. Declaration

components: {
  roundTurntable
},

3. Call

<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  src="/static/imghw/default1.png" data-src="scope.item.prizeImg" class="lazy" alt="Can vuejs make a turntable?" >
      </p>
    </template>
</round-turntable>

data() {
  return {
    // 转盘上的奖品数据
    prizeData: [
   {
     id: 1,
     prizeName: '2000元京东券',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/1.png',
   },
   {
     id: 2,
     prizeName: '300元京东券',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/7.png',
   },
   {
     id: 3,
     prizeName: '50个比特币',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/3.png',
   },
   {
     id: 4,
     prizeName: '50元话费券',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/4.png',
   },
   {
     id: 5,
     prizeName: '100元话费券',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/5.png',
   },
   {
     id: 6,
     prizeName: '100个比特币',
     prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png',
   }
  ],
  // 转动的圈数
  rotateCircle: 6,
  // 转动需要持续的时间（s）
  duringTime: 4.5,
  // 转盘样式的选项
  turntableStyleOption: {
    // 背景色
    prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'],
    // 转盘的外边框颜色
    borderColor: '#199301',
  },
 }
},
methods: {
  // 已经转动完转盘触发的函数
   endRotation() {
      // 提示中奖
      alert(`恭喜您获奖啦,您的奖品是：${this.prizeData[this.prizeIndex].prizeName}`);
   },
},

.turntable {
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 200px);
  width: 400px;
  height: 400px;
}
.turntable-name {
  /*background: pink;*/
  position: absolute;
  left: 10px;
  top: 20px;
  width: calc(100% - 20px);
  font-size: 26px;
  text-align: center;
  color: #fff;
}
  .turntable-img {
  position: absolute;
  /*要居中就要50% - 宽度 / 2*/
  left: calc(50% - 80px / 2);
  top: 60px;
  width: 80px;
  height: 80px;
  img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

5. Attribute description of roundTurntable component

Parameters	Description	Type	Default value
ref	To get the DOM node of this component and call the sub-component's start rotation animation method, use this.$refs[refName].rotate(index)	string	—
prizeData	Prize data displayed on the wheel	array	—
rotateCircle	The number of circles to be rotated	number	6
duringTime	The time required to rotate (unit is secondss)	number	4.5
turntableStyleOption	Turntable style options (background color, outer border color)	object	{ prizeBgColors: ['#AE3EFF', '# 4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' }
class	Style used to define the position and size of the turntable	string	—

6. Event description of the roundTurntable component

Event name	Description	Callback parameters
endRotation	Event callback triggered after the turntable stops	—

##7. Complete project code

https:// github.com/LiaPig/vue-round-turntable

The prize images and pointer images used are from:

http://sc.chinaz.com/jiaobendemo.aspx?downloadid= 12018113053246

The above is the detailed content of Can vuejs make a turntable?. For more information, please follow other related articles on the PHP Chinese website!