vuejsはターンテーブルを作ることができますか？-Vue.js-php.cn

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

藏色散人

リリース： 2023-01-13 00:45:38

オリジナル

3085 人が閲覧しました

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

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

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

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

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

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

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

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

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

3. ページのプレビュー

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

4. 基本的な使用法

引用

import roundTurntable from './components/roundTurntable';

ログイン後にコピー

宣言

components: {
  roundTurntable
},

ログイン後にコピー

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: ['#AE3EFF', '# 4D3FFF'、'#FC262C'、'#3A8BFF'、'#EE7602'、'#FE339F']、borderColor: '#199301' }class6.roundTurntable のイベントの説明コンポーネント


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