Home > Web Front-end > Vue.js > Can vuejs make a turntable?

Can vuejs make a turntable?

藏色散人
Release: 2023-01-13 00:45:38
Original
3080 people have browsed it

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.

Can vuejs make a turntable?

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

Can vuejs make a turntable?

4. Basic usage

  1. Quote
import roundTurntable from './components/roundTurntable';
Copy after login
  1. Declaration
components: {
  roundTurntable
},
Copy after login
  1. Call
<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  alt="Can vuejs make a turntable?" >
      </p>
    </template>
</round-turntable>
Copy after login
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}`);
   },
},
Copy after login
.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%;
  }
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template