這篇文章主要介紹Vue.js如何實現(xiàn)大轉盤抽獎，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為瓊中黎族企業(yè)提供專業(yè)的成都網(wǎng)站建設、網(wǎng)站設計，瓊中黎族網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

先上圖看看本次案例的整體效果。

       實現(xiàn)思路：

Vue component實現(xiàn)大轉盤組件，可以嵌套到任意要使用的頁面。

css3 transform控制大轉盤抽獎過程的動畫效果。

抽獎組件內(nèi)使用鉤子函數(shù)watch監(jiān)聽抽獎結果的返回情況播放大轉盤動畫并給用戶彈出中獎提示。

中獎結果彈窗，為抽獎組件服務。

       實現(xiàn)步驟如下：

 構建api獎品配置信息和抽獎接口，vuex全局存放獎品配置和中獎結果數(shù)據(jù)信息。

api：

export default {
 getPrizeList () {
  let prizeList = [
   {
    id: 1,
    name: '小米8',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
   },
   {
    id: 2,
    name: '小米電視',
    img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
   }, {
    id: 3,
    name: '小米平衡車',
    img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
   }, {
    id: 4,
    name: '小米耳機',
    img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
   }
  ]
  return prizeList
 },
 lottery () {
  return {
   id: 4,
   name: '小米耳機',
   img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
  }
 }
}

store:

import lotteryApi from '../../api/lottery.api.js'
const state = {
 prizeList: [],
 lotteryResult: {}
}
const getters = {
 prizeList: state => state.prizeList,
 lotteryResult: state => state.lotteryResult
}
const mutations = {
 SetPrizeList (state, { prizeList }) {
  state.prizeList = prizeList
 },
 SetLotteryResult (state, { lotteryResult }) {
  state.lotteryResult = lotteryResult
 }
}
const actions = {
 getPrizeList ({ commit }) {
  let result = lotteryApi.getPrizeList()
  commit('SetPrizeList', { prizeList: result })
 },
 lottery ({ commit }) {
  let result = lotteryApi.lottery()
  commit('SetLotteryResult', { lotteryResult: result })
 }
}

export default {
 state,
 getters,
 mutations,
 actions,
 namespaced: true
}

編寫抽獎組件，為保證通用性，組件只負責播放抽獎結果。接收兩個數(shù)據(jù)和一個方法，如下：

數(shù)據(jù)一：預置的獎品列表數(shù)據(jù)（輪播獎品需要）

數(shù)據(jù)二：抽獎結果，播放抽獎動畫和彈出中獎結果需要

方法：抽獎動作，返回的抽獎結果數(shù)據(jù)即為數(shù)據(jù)二，響應式傳遞給組件

大概代碼思路如下（僅供參考，不可運行）

彈出中獎結果組件，依附于抽獎組件，在上一步的執(zhí)行抽獎結果動畫結束后執(zhí)行。

抽獎組件運用在需要使用的頁面中，此頁面需要為抽獎組件提前準備好預置獎品列表和中獎結果信息，并提供好抽獎方法供子組件（抽獎組件）觸發(fā)，觸發(fā)完更改抽獎結果響應式傳入到抽獎組件中。

以上是“Vue.js如何實現(xiàn)大轉盤抽獎”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！