vuejsはターンテーブルを作ることができますか？

vuejsはターンテーブルを作ることができ、実装方法は、 1.抽選ボタンを作成する; 2.ターンテーブルが停止する位置を取得する; 3.背景とインタラクトする; 4.設定した場所に停止するアニメーション終了後のステップ 2; 5. 賞品獲得機能のロックを解除するためのプロンプトを設定します。

この記事の動作環境: Windows 7 システム、Vue バージョン 2.9.6、Dell G3 コンピューター。

vuejs でターンテーブルを作ることはできますか?

Vue で構成可能な円形宝くじターンテーブル コンポーネント

1. 宝くじプロセス全体の分析:

1. ターンテーブルの中央にあるポインターをクリックしました (例: 抽選開始ボタン)、回転できるかどうかを判断します (特定のロジックは canBeRotated()--① 現在所有している抽選の数が 0 より大きいかどうか ② 現在回転しているか (ロックされているか) )) を決定し、合格した場合は次のステップに進みます。そうでない場合は、対応するプロンプトがポップアップ表示されます。
2. ターンテーブルが停止して背景​​と対話する位置を取得します。ただし、これはデモンストレーションのみを目的としており、0 ～ 5 がローカルでランダムに選択されます。
3. 背景との対話に成功して停止位置を取得したら、ターンテーブルをロックして描画数を減らします。
4. 回転を開始し、アニメーション終了後にステップ 2 で設定した場所で停止するようにターンテーブル コンポーネントに指示します。
5. ターンテーブルが回転し、手順3で設定した場所で停止し、勝利とロック解除を促します。

2. 円形の宝くじホイール コンポーネントで行う必要があること

1. 各ホイールの背景色と外枠の色をカスタマイズできます。 (turntableStyleOptionプロパティ)
2. ターンテーブルのサイズと位置。 (呼び出し時に、コンポーネントにクラスを追加します。コードでは turntable です)
3. ターンテーブルの実行時に必要な回転数をカスタマイズします。 (rotateCircleプロパティ)
4. 実行中のアニメーションの継続時間をカスタマイズできます。 (duringTime 属性)
5. 親コンポーネントから渡された賞品情報(prizeData)を受け取り、各ターンテーブルの位置を表示します。 (円の中心を基準に回転する角度を計算する getRotateAngle()メソッド)
6. 親コンポーネントから呼び出されてから回転を開始し、指定した位置で停止するメソッド(rotate )、アニメーションの終了後に停止したことを親コンポーネントに伝えます。
7. 賞品の名前と写真はカスタマイズできます。

3. ページのプレビュー

4. 基本的な使用法

1. 引用

import roundTurntable from './components/roundTurntable';

2. 宣言

components: {
  roundTurntable
},

3. Call

<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  alt="vuejsはターンテーブルを作ることができますか？" >
      </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.roundTurntable コンポーネントの属性の説明

##パラメータ説明タイプデフォルト値refこのコンポーネントの DOM ノードを取得し、サブコンポーネントの回転開始アニメーション メソッドを呼び出すには、stringprizeDatarotateCircle6duringTime s4.5turntableStyleOption{ プライズ BgColors: ['#AE3E​​FF', '# 4D3FFF'、'#FC262C'、'#3A8BFF'、'#EE7602'、'#FE339F']、borderColor: '#199301' }class6.roundTurntable のイベントの説明コンポーネント

	this.$refs[refName].rotate(index)	## を使用します。 #—
ホイールに表示される賞品データ	array	—
回転する円の数	number
回転にかかる時間(単位は秒	)数値
ターンテーブル スタイル オプション (背景色、外枠色)	object
ターンテーブルの位置とサイズを定義するために使用されるスタイル	string	—

イベント名endRotation##—##https:/ / github.com/LiaPig/vue-round-turntable使用される賞品画像とポインター画像は次からのものです:

説明	コールバックパラメータ
ターンテーブルの停止後にトリガーされるイベント コールバック		#7. 完全なプロジェクト コード

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

以上がvuejsはターンテーブルを作ることができますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。