Vuejs peut-il créer une platine vinyle ?

vuejs peut créer un plateau tournant, et la méthode de mise en œuvre est la suivante : 1. Créez un bouton de loterie ; 2. Obtenez la position où le plateau tournant doit s'arrêter ; 3. Interagissez avec l'arrière-plan 4. Arrêtez-vous à l'endroit défini à l'étape 2 ; l'animation se termine ; 5. Définir des invites. Gagner des prix débloque des fonctionnalités.

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur Dell G3.

Les vuejs peuvent-ils fabriquer des platines ?

Composant de carrousel de loterie circulaire configurable dans Vue

1 Analyse de l'ensemble du processus de loterie :

1. Cliquez sur le pointeur au milieu du carrousel (c'est-à-dire le bouton de démarrage de la loterie) pour déterminer s'il peut être tourné (la logique spécifique). est encapsulé dans In canBeRotated() - ① Si le nombre actuel de tirages est supérieur à 0 ② S'il est actuellement en rotation (verrouillé)), s'il est réussi, passez à l'étape suivante, sinon une invite correspondante apparaîtra.
canBeRotated()里--①当前拥有的抽奖次数是否大于0②现在是否正在转动着（被锁着）），判断通过则进行下一步, 否则弹出相应提示。
2. 获取转盘应该停止的位置，应该与后台交互，但这里仅作演示用途, 本地随机抽取0~5。
3. 与后台交互成功获取到该停止的位置后，锁定转盘且减少抽奖次数。
4. 告诉转盘组件，开始转动了，并且动画结束后停在步骤2设置的地方。
5. 转盘转动，停在步骤3设置的地方后再提示中奖，解锁。

二、圆形抽奖转盘组件需要做的事情

1. 可以自定义每一格转盘的背景颜色，外边框的颜色。（turntableStyleOption属性）
2. 转盘的大小与位置。（在调用时，给组件加个class，代码里为turntable）
3. 自定义这个转盘运转起来要转过的圈数。（rotateCircle属性）
4. 可以自定义运转动画的时长。（duringTime属性）
5. 通过接收到父组件传递过来的奖品信息（prizeData），显示在每一格转盘的位置。（计算要根据圆心旋转的角度getRotateAngle()方法）
6. 被父组件调用后就开始转动，并在指定位置停下的方法（rotate），结束动画后告诉父组件已停下。
7. 奖品的名称和图片可以自定义样式。

三、页面预览

四、基础用法

1. 引用

import roundTurntable from './components/roundTurntable';

2. 声明

components: {
  roundTurntable
},

3. 调用

<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  src="/static/imghw/default1.png" data-src="scope.item.prizeImg" class="lazy" alt="Vuejs peut-il créer une platine vinyle ?" >
      </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%;
  }
}

五、roundTurntable组件的属性说明

Après avoir interagi avec succès avec l'arrière-plan pour obtenir la position d'arrêt, verrouillez le plateau tournant et réduisez le nombre de tirages. Dites au composant du plateau tournant de commencer à tourner et de s'arrêter à l'endroit défini à l'étape 2 une fois l'animation terminée. Le plateau tournant tourne et s'arrête à l'endroit défini à l'étape 3 avant de vous inviter à gagner et à débloquer. Vous pouvez personnaliser la couleur d'arrière-plan et la couleur de la bordure extérieure de chaque roue. (turntableStyleOptionproperty)Personnalisez le nombre de tours que le plateau tournant doit effectuer lorsqu'il fonctionne. (attribut rotateCircle)En recevant les informations sur le prix (prizeData) transmises par le composant parent, elles sont affichées à la position de chaque roue. (Calculez l'angle à faire pivoter en fonction du centre du cercle méthode getRotateAngle())Méthode qui commence à tourner après avoir été appelée par le composant parent et s'arrête à la position spécifiée (rotate), après avoir terminé l'animation, indiquez au composant parent qu'elle s'est arrêtée. Le nom et la photo du prix peuvent être personnalisés.

参数	说明	类型	默认值
ref	获取这组件的dom节点，调用子组件的开始转动动画方法要用到this.$refs[refName].rotate(index)	string	—
prizeData	显示在转盘上的奖品数据	array	—
rotateCircle	转盘要转过的圈数	number	6
duringTime	转动需要持续的时间（单位为秒s）	number	4.5
turntableStyleOption	转盘的样式选项（背景色、外边框颜色）	object	{ prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' }Obtenez la position où le plateau tournant doit s'arrêter et il doit interagir avec l'arrière-plan, mais ce n'est qu'à des fins de démonstration, et 0 ~ 5 est sélectionné au hasard localement.
2. Que faut-il faire pour le composant de la roue de loterie circulaire		La taille et la position du plateau tournant. (Lors de l'appel, ajoutez une classe au composant, qui est plateau dans le code)	Vous pouvez personnaliser la durée de l'animation en cours d'exécution. (attribut duringTime)

3. Aperçu de la page

Quatre. Utilisation de baseDéclaration li> li>rrreee

5. Description de l'attribut du composant roundTurntableParameter

Citationrrreee	Appelrrreeerrreeerrreee
Description	Type	Valeur par défaut

ref

Obtenez le nœud dom de ce composant et appelez la méthode d'animation de rotation de démarrage du sous-composant pour utiliser this.$refs[refName].rotate(index)

string

—🎜🎜🎜🎜prizeData🎜🎜Données de prix affichées sur la roue🎜🎜array🎜🎜—🎜🎜🎜🎜rotateCircle🎜🎜Le nombre de tours dont la roue doit tourner🎜🎜number🎜 🎜6 🎜 🎜🎜🎜duringTime🎜🎜La durée de rotation (en secondes s) 🎜🎜number🎜🎜4.5🎜🎜🎜🎜turntableStyleOption🎜🎜Option de style pour le plateau tournant (couleur de fond, couleur de la bordure extérieure)🎜🎜object🎜🎜{ prizeBgColors : ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F '], borderColor ) Nom🎜🎜Description🎜🎜Paramètres de rappel🎜🎜🎜🎜🎜🎜endRotation🎜🎜Rappel d'événement déclenché après l'arrêt de la platine🎜🎜—🎜🎜🎜🎜🎜 7. Code complet du projet🎜🎜https://git moyeu. com/LiaPig/ Les images de prix et les images de pointeurs utilisées par vue-round-turntable🎜🎜 proviennent de : 🎜🎜http://sc.chinaz.com/jiaobendemo.aspx?downloadid=12018113053246🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!