vuejs 可以做轉盤嗎

2021-09-21 16:00:07

vuejs可以做轉盤,其實現方法:1、建立抽獎按鈕;2、獲取轉盤應該停止的位置;3、與後臺互動;4、在動畫結束後停在步驟2設定的地方;5、設定提示中獎解鎖功能。

本文操作環境:windows7系統、Vue2.9.6版、Dell G3電腦。

vuejs 可以做轉盤嗎?

Vue中可設定的圓形抽獎轉盤元件

一、整個抽獎流程的思路分析:

  1. 點選了轉盤正中間的指標(即開始抽獎按鈕),判斷是否可以轉動(具體邏輯封裝在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. 獎品的名稱和圖片可以自定義樣式。

三、頁面預覽

a65e49668ad03bd821a278159654732.png

四、基礎用法

  1. 參照
import roundTurntable from './components/roundTurntable';
  1. 宣告
components: {
  roundTurntable
},
  1. 呼叫
<round-turntable
  ref="roundTurntable"
  :prizeData="prizeData"
  :rotateCircle="rotateCircle"
  :duringTime="duringTime"
  :turntableStyleOption="turntableStyleOption"
  @endRotation="endRotation"
  class="turntable">
    <template slot="item" slot-scope="scope">
      <p class="turntable-name">{{ scope.item.prizeName }}</p>
      <p class="turntable-img">
        <img :src="scope.item.prizeImg">
      </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元件的屬性說明

引數說明型別預設值
ref獲取這元件的dom節點,呼叫子元件的開始轉動動畫方法要用到this.$refs[refName].rotate(index)string
prizeData顯示在轉盤上的獎品資料array
rotateCircle轉盤要轉過的圈數number6
duringTime轉動需要持續的時間(單位為秒snumber4.5
turntableStyleOption轉盤的樣式選項(背景色、外邊框顏色)object{ prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' }
class用來定義轉盤位置和大小的樣式string

六、roundTurntable元件的事件說明

事件名稱說明回撥引數
endRotation轉盤停下來後觸發的事件回撥

七、完整專案程式碼

https://github.com/LiaPig/vue-round-turntable

使用到的獎品圖片和指標圖片均來自:

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

以上就是vuejs 可以做轉盤嗎的詳細內容,更多請關注TW511.COM其它相關文章!