Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解
轉(zhuǎn)盤抽獎(jiǎng)主要有兩種,指針轉(zhuǎn)動(dòng)和轉(zhuǎn)盤轉(zhuǎn)動(dòng),個(gè)人覺得轉(zhuǎn)盤轉(zhuǎn)動(dòng)比較好看點(diǎn),指針轉(zhuǎn)動(dòng)看著頭暈,轉(zhuǎn)盤轉(zhuǎn)動(dòng)時(shí)指針是在轉(zhuǎ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)盤</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)盤實(shí)現(xiàn)思路詳解,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue element 表頭添加斜線的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比
這篇文章主要給大家介紹了關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3 el-pagination 將組件中英文‘goto’ 修改 為&nbs
這篇文章主要介紹了vue3 el-pagination 將組件中英文‘goto’ 修改 為 中文到‘第幾’,通過實(shí)例代碼介紹了vue3項(xiàng)目之Pagination 組件,感興趣的朋友跟隨小編一起看看吧2024-02-02