下載npm包

npm install vue-pant yarn add vue-pant

全局注冊

import 'vue-pant/lib/pant.css' import {bigTurntable} from 'vue-pant' Vue.use(pant);

頁面按需引入

import 'vue-pant/lib/pant.css' import {bigTurntable} from 'vue-pant' <big-turntable/>

組件屬性

1.size：大小（number）
2.index：到達區域（number）
3.button：是否顯示按鈕（boolean）
4.options：轉盤數據

默認值

[{area:'一等獎',color:'red'},{area:'二等獎',color:'#ccc'},{area:'三等獎',color:'yellow'},{area:'四等獎',color:'#3858E6'} ]

5.轉動事件：lottery()

效果

總結

以上是生活随笔為你收集整理的vue大转盘抽奖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。