快捷導(dǎo)航

Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解

更新時(shí)間：2019年05月06日 16:19:22 作者：木子沐沐

這篇文章主要介紹了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)椴怀Ｓ米詈檬巧暇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)文章

mpvue 單文件頁(yè)面配置詳解
這篇文章主要介紹了mpvue 單文件頁(yè)面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過(guò)配置 mpvue-config-loader 來(lái)實(shí)現(xiàn)在 vue 文件內(nèi)書寫小程序的頁(yè)面配置，感興趣的小伙伴們可以參考一下
2018-12-12
在vue3中動(dòng)態(tài)加載遠(yuǎn)程組件的流程步驟
在一些特殊的場(chǎng)景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務(wù)端動(dòng)態(tài)加載.vue文件,然后將動(dòng)態(tài)加載的遠(yuǎn)程vue組件渲染到我們的項(xiàng)目中,今天這篇文章我將帶你學(xué)會(huì),在vue3中如何去動(dòng)態(tài)加載遠(yuǎn)程組件,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-08-08
基于Vue實(shí)現(xiàn)支持按周切換的日歷
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)支持按周切換的日歷，根據(jù)實(shí)際開發(fā)情況按每年、每月、每周進(jìn)行切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))
這篇文章主要介紹了vue前臺(tái)顯示500和405錯(cuò)誤的解決(springboot為后臺(tái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作
這篇文章主要介紹了vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析
這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能
這篇文章主要介紹了.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果實(shí)例(webpack-theme-color-replacer的使用)
換皮膚一般都是點(diǎn)擊一個(gè)按鈕彈出一些皮膚的選項(xiàng),選中選項(xiàng)后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下
2023-02-02
Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法
這篇文章主要介紹了Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03