vuejs 可以做轉盤嗎

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. 獎品的名稱和圖片可以自訂樣式。

三、頁面預覽

四、基礎用法

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 可以做轉盤嗎" >
      </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元件的屬性說明

##— prizeData顯示在轉盤上的獎品資料array—rotateCircle轉盤要轉過的圈數numberduringTime轉動需要持續的時間（單位為秒number##turntableStyleOption{ prizeBgColors: ['#AE3E​​FF', '# 4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' }#class

參數	說明	類型	預設值
ref	#取得這元件的dom節點，呼叫子元件的開始轉動動畫方法要用到this.$refs[refName].rotate(index)	string
			6
	s）		4.5
轉盤的樣式選項（背景色、外邊框顏色）	object
#class	用來定義轉盤位置和大小的樣式	string	—

#六、roundTurntable元件的事件說明

##endRotation轉盤停下來後觸發的事件回呼—

事件名稱	說明	回呼參數

#七、完整項目代碼

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

#使用到的獎品圖片和指標圖片都來自：

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

以上是vuejs 可以做轉盤嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！