Können Vuejs einen Plattenspieler bauen?

vuejs kann einen Drehteller erstellen, und die Implementierungsmethode ist: 1. Erstellen Sie eine Lotterie-Schaltfläche. 2. Ermitteln Sie die Position, an der der Drehteller anhalten soll. 3. Interagieren Sie mit dem Hintergrund die Animation endet; 5. Eingabeaufforderungen festlegen Durch das Gewinnen von Preisen werden Funktionen freigeschaltet.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, Dell G3-Computer.

Können Vuejs Plattenspieler herstellen?

Konfigurierbare kreisförmige Lotteriekarussellkomponente in Vue

1. Analyse des gesamten Lotterieprozesses:

1. Klicken Sie auf den Zeiger in der Mitte des Karussells (d. h. auf die Schaltfläche „Lotterie starten“), um festzustellen, ob es gedreht werden kann (die spezifische Logik). ist eingekapselt in In canBeRotated() - ① Ob die aktuelle Anzahl der Ziehungen größer als 0 ist ② Ob es sich gerade dreht (gesperrt)), wenn übergeben, fahren Sie mit dem nächsten Schritt fort, andernfalls mit einer entsprechenden Eingabeaufforderung wird auftauchen.
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  alt="Können Vuejs einen Plattenspieler bauen?" >
      </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组件的属性说明

Nachdem Sie erfolgreich mit dem Hintergrund interagiert haben, um die Stoppposition zu erreichen, verriegeln Sie den Drehteller und reduzieren Sie die Anzahl der Züge. Weisen Sie die Drehtellerkomponente an, sich zu drehen und an der in Schritt 2 festgelegten Stelle anzuhalten, nachdem die Animation beendet ist. Der Drehteller dreht sich und stoppt an der in Schritt 3 festgelegten Stelle, bevor er Sie zum Gewinnen und Freischalten auffordert. Die Größe und Position des Plattentellers. (Fügen Sie beim Aufruf eine Klasse zur Komponente hinzu, die im Code turntable ist.)Sie können die Dauer der laufenden Animation anpassen. (duringTime-Attribut)Methode, die nach dem Aufruf durch die übergeordnete Komponente mit der Drehung beginnt und an der angegebenen Position stoppt (rotate), nachdem Sie die Animation beendet haben, teilen Sie der übergeordneten Komponente mit, dass sie gestoppt wurde. 3. Seitenvorschau

参数	说明	类型	默认值
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' }Ermitteln Sie die Position, an der der Drehteller anhalten und mit dem Hintergrund interagieren soll. Dies dient jedoch nur zu Demonstrationszwecken und 0 bis 5 werden lokal zufällig ausgewählt.
2. Was muss für die kreisförmige Lotterierad-Komponente getan werden? Sie können die Hintergrundfarbe und die äußere Randfarbe jedes Rads anpassen. (turntableStyleOptionproperty)	Passen Sie die Anzahl der Umdrehungen an, die der Turntable ausführen muss, wenn er läuft. (rotateCircle-Attribut)	Durch den Empfang der von der übergeordneten Komponente übergebenen Preisinformationen (prizeData) werden diese an der Position jedes Rads angezeigt. (Berechnen Sie den zu drehenden Winkel entsprechend dem Kreismittelpunkt getRotateAngle()-Methode)	Der Name und das Bild des Preises können individuell angepasst werden.

Vier. Grundlegende Verwendung

Zitatrrreee

Erklärung li> li>rrreee

CallrrreeerrreeerrreeeParameterBeschreibungTyp Standardwert ref

5. Attributbeschreibung der RoundTurntable-Komponente

Rufen Sie den Dom-Knoten dieser Komponente ab und rufen Sie die Startrotationsanimationsmethode der Unterkomponente auf, um this.$refs[refName].rotate(index) zu verwenden Auf dem Rad angezeigte Preisdaten

6

duringTime

🎜Die Dauer der Rotation (in Sekunden s) 🎜🎜number🎜🎜4.5🎜🎜🎜🎜turntableStyleOption🎜🎜Style-Option für der Plattenspieler (Hintergrundfarbe, äußere Randfarbe)🎜🎜Objekt🎜🎜{ PrizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F '], borderColor ) Name🎜🎜Beschreibung🎜🎜Rückrufparameter🎜🎜🎜🎜🎜🎜endRotation🎜🎜Ereignisrückruf ausgelöst, nachdem die Drehscheibe stoppt🎜🎜—🎜🎜🎜🎜🎜 7. Vollständiger Projektcode🎜🎜https://github. com/LiaPig/ Die von vue-round-turntable🎜🎜 verwendeten Preisbilder und Zeigerbilder stammen von: 🎜🎜http://sc.chinaz.com/jiaobendemo.aspx?downloadid=12018113053246🎜

Das obige ist der detaillierte Inhalt vonKönnen Vuejs einen Plattenspieler bauen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!