Vue 幸運(yùn)大轉(zhuǎn)盤(pán)實(shí)現(xiàn)思路詳解
轉(zhuǎn)盤(pán)抽獎(jiǎng)主要有兩種,指針轉(zhuǎn)動(dòng)和轉(zhuǎn)盤(pán)轉(zhuǎn)動(dòng),個(gè)人覺(jué)得轉(zhuǎn)盤(pán)轉(zhuǎn)動(dòng)比較好看點(diǎn),指針轉(zhuǎn)動(dòng)看著頭暈,轉(zhuǎn)盤(pán)轉(zhuǎn)動(dòng)時(shí)指針是在轉(zhuǎn)盤(pán)的中間位置,這里要用到css的transform屬性和transition屬性,這兩個(gè)因?yàn)椴怀S米詈檬巧暇W(wǎng)查查,用法和功能。
在html部分
<div id="wheel_surf">
<div class="wheel_surf_title">幸運(yùn)大轉(zhuǎn)盤(pán)</div>
<div class="lucky-wheel">
<div class="wheel-main">
<div class="wheel-pointer-box">
<div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
</div>
<div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
<div class="prize-list">
<div class="prize-item" v-for="(item,index) in prize_list" :key="index">
<div class="prize-pic" v-if="item.icon">
<img :src="item.icon" />
</div>
<div class="prize-type">
{{item.name}}</div>
</div>
</div>
</div>
</div>
</div>
<div v-transfer-dom>
<x-dialog v-model="showHideOnBlur" class="dialog-demo wheel_dialog" hide-on-blur>
<div class="img-box">
<div v-show="val == 7" class="noactive">
<p>謝謝參與!祝您下次好運(yùn)</p>
</div>
<div v-show="val !== 7">
<p>恭喜你</p>
<img :src="imgActive" />
<p>{{item.rewardDesc}}</p> // 獲獎(jiǎng)返回值
</div>
</div>
<div @click="showHideOnBlur=false">
<span class="vux-close"></span>
</div>
</x-dialog>
</div>
</div>
總結(jié)
以上所述是小編給大家介紹的Vue 幸運(yùn)大轉(zhuǎn)盤(pán)實(shí)現(xiàn)思路詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- Vue.js實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)總結(jié)及實(shí)現(xiàn)思路
- vue簡(jiǎn)單實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)
- vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤(pán)抽獎(jiǎng)
- 基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
- vue實(shí)現(xiàn)手機(jī)號(hào)碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫(huà)示例
- VUE實(shí)現(xiàn)大轉(zhuǎn)盤(pán)抽獎(jiǎng)
相關(guān)文章
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹(shù)中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11
vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比
這篇文章主要給大家介紹了關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
vue 數(shù)據(jù)遍歷篩選 過(guò)濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過(guò)濾 排序的應(yīng)用操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3 el-pagination 將組件中英文‘goto’ 修改 為&nbs
這篇文章主要介紹了vue3 el-pagination 將組件中英文‘goto’ 修改 為 中文到‘第幾’,通過(guò)實(shí)例代碼介紹了vue3項(xiàng)目之Pagination 組件,感興趣的朋友跟隨小編一起看看吧2024-02-02

