vuejs可以做轉盤，其實作方法：1、建立抽獎按鈕；2、取得轉盤應該停止的位置；3、與後台互動；4、在動畫結束後停在步驟2設定的地方； 5.設定提示中獎解鎖功能。
本文操作環境：windows7系統、Vue2.9.6版、Dell G3電腦。
vuejs 可以做唱盤嗎？
Vue中可設定的圓形抽獎轉盤元件
canBeRotated()裡--①目前擁有的抽獎次數是否大於0②現在是否正在轉動（被鎖著）），判斷通過則進行下一步, 否則彈出相應提示。 turntableStyleOption屬性）turntable）rotateCircle屬性）duringTime屬性）prizeData），顯示在每一格轉盤的位置。 （計算要根據圓心旋轉的角度getRotateAngle()方法）rotate# ），結束動畫後告訴父組件已停下。 
import roundTurntable from './components/roundTurntable';
components: {
roundTurntable
},{{ scope.item.prizeName }}
![vuejs 可以做轉盤嗎]()
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%;
}
}| 參數 | 說明 | 類型 | 預設值 |
|---|---|---|---|
| ref | #取得這元件的dom節點，呼叫子元件的開始轉動動畫方法要用到this.$refs[refName].rotate(index)
|
string | ##—|
| 顯示在轉盤上的獎品資料 | array | — | |
| 轉盤要轉過的圈數 | number | 6 |
|
| 轉動需要持續的時間（單位為秒 | s）
| number4.5 |
|
| 轉盤的樣式選項（背景色、外邊框顏色） | object | { prizeBgColors: ['#AE3EFF', '# 4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' } | |
| #class | 用來定義轉盤位置和大小的樣式 | string | — |
| 事件名稱 | 說明 | 回呼參數 |
|---|---|---|
| 轉盤停下來後觸發的事件回呼 | — |
以上是vuejs 可以做轉盤嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
