Vue 幸運大轉盤實現思路詳解
更新時間：2019年05月06日 16:19:22 作者：木子沐沐
這篇文章主要介紹了Vue 幸運大轉盤實現思路詳解,需要的朋友可以參考下
轉盤抽獎主要有兩種，指針轉動和轉盤轉動，個人覺得轉盤轉動比較好看點，指針轉動看著頭暈，轉盤轉動時指針是在轉盤的中間位置，這里要用到css的transform屬性和transition屬性，這兩個因為不常用最好是上網查查，用法和功能。
在html部分
<div id="wheel_surf">
<div class="wheel_surf_title">幸運大轉盤</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>謝謝參與！祝您下次好運</p>
</div>
<div v-show="val !== 7">
<p>恭喜你</p>
<img :src="imgActive" />
<p>{{item.rewardDesc}}</p> // 獲獎返回值
</div>
</div>
<div @click="showHideOnBlur=false">
<span class="vux-close"></span>
</div>
</x-dialog>
</div>
</div>
總結
以上所述是小編給大家介紹的Vue 幸運大轉盤實現思路詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要介紹了mpvue 單文件頁面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎上，通過配置 mpvue-config-loader 來實現在 vue 文件內書寫小程序的頁面配置，感興趣的小伙伴們可以參考一下2018-12-12
在一些特殊的場景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務端動態(tài)加載.vue文件,然后將動態(tài)加載的遠程vue組件渲染到我們的項目中,今天這篇文章我將帶你學會,在vue3中如何去動態(tài)加載遠程組件,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
這篇文章主要為大家詳細介紹了基于Vue實現支持按周切換的日歷，根據實際開發(fā)情況按每年、每月、每周進行切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue項目中微信登錄的實現操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了關于vuex強刷數據丟失問題解析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了.netcore+vue 實現壓縮文件下載功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
vue項目實現一鍵網站換膚效果實例(webpack-theme-color-replacer的使用)
換皮膚一般都是點擊一個按鈕彈出一些皮膚的選項,選中選項后皮膚生效,下面這篇文章主要給大家介紹了關于vue項目實現一鍵網站換膚效果的相關資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue3新增時自動獲取當前時間的操作方法,本文通過實例代碼圖文相結合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
下面小編就為大家分享一篇echarts鼠標覆蓋高亮顯示節(jié)點及關系名稱詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03