vue組件如何封裝實現(xiàn)抽獎隨機數(shù)

今天小編給大家分享一下vue組件如何封裝實現(xiàn)抽獎隨機數(shù)的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、子組件

<template>
    <div>
     <slot></slot>
    </div>
</template>
 
 
<script>
     export default {
         name:'countUp',
         props:{
             lastSymbol:{
                 type:String,
                 default:" 位"  
             },
             value:{ //滾動結(jié)束最終顯示數(shù)字
                 type:[String,Number],
                 default:100,
             },
             from:{ // 開始時的數(shù)字
                 type:[String,Number],
                 default:0
             },
             speed:{ // 總時間
                 type:[String,Number],
                 default:2000,
             },
             refreshInterval:{ // 刷新一次的時間
                 type:[String,Number],
                 default:10,
             },
             beforeSize:{ //小數(shù)點前最小顯示位數(shù)，不足的話用0代替 
                 type:[String,Number],
                 default:0
             },
             decimals:{ // 小數(shù)點后的位數(shù)，小數(shù)做四舍五入
                 type:[String,Number],
                 default:2
             },
             isstart:{ //是否開始滾動
                 type:Boolean,
                 default:true
             }
         },
        data(){
         return{
             loops:'', //刷新次數(shù)
             increment:'', //刷新一次增加的數(shù)值
             loopCount:'', //記錄刷新的次數(shù)
            CurrentValue:'',  //開始時候的數(shù)字
            interval:'', //定時器
            sizeNum:'',//當前數(shù)字的長度
            sizeNumBefore:'', //當前數(shù)字小數(shù)點前的位數(shù)
              }
 
          },
         watch:{
            isstart(val){
   
                if(val){
                  this.start()
                }else{
                  clearInterval(this.interval);
                }
 
            }
         },
        methods:{
            start(){
               this.loops = Math.ceil(this.speed / this.refreshInterval)//刷新次數(shù)
 
                this.increment = (this.value - this.from)/this.loops  //（結(jié)束的數(shù)字-開始的數(shù)字）/刷新次數(shù) ，刷新一次增加的數(shù)值
                this.loopCount = 0 //記錄刷新的次數(shù)
                this.CurrentValue = this.from //開始時候的數(shù)字
 
                this.interval = setInterval(this.updateTimer,this.refreshInterval) //設(shè)置定時器，沒個一段時間就執(zhí)行
            },
            updateTimer(){ //刷新一次數(shù)值疊加
             this.CurrentValue+=this.increment //當前展示的值
             this.loopCount++ //刷新次數(shù)+1
             
            var tim = this.CurrentValue.toFixed(this.decimals) //對當前值進行四舍五入 ,tim四射物質(zhì)之后的當前數(shù)值
 
             this.sizeNum = String(tim).length;
             
             this.sizeNumBefore = this.sizeNum - this.decimals - 1;
              
             if(this.sizeNumBefore>=this.beforeSize){ //當前數(shù)字的小數(shù)點位數(shù)》=要求的小數(shù)點前位數(shù)
               
               this.$emit('sendValue',tim + this.lastSymbol)
 
             }else{
 
                  tim = Array(this.beforeSize-this.sizeNumBefore + 1).join('0') + tim;
                  this.$emit('sendValue',tim + this.lastSymbol)
 
             }
 
 
            if(Number(this.loopCount)>=Number(this.loops)){ //清楚定時器
 
                 clearInterval(this.interval);
 
             }
 
            }
            
        },
     
     }
</script>
<style scoped> 
    
</style>

二、父組件

<template>
  <div class="about marquee">
  
 
    <count-up value="99.99" decimals="0" :isstart="isstart" @sendValue="acceptValue"><span class="changeNum">{{currentNum}}</span></count-up>
 
    <button class="btn" @click="goChoujiang">是否開始滾動</button>
  </div>
</template>
 
<script>
 
import countUp from '../../components/countUp/countUp.vue';  //下拉框帶popup蒙層
export default {
   name:'cecountUp',
   components: { //注冊組件
    countUp
  },
 
  data() {
    return {
     currentNum:"即將開始抽獎", //當前數(shù)值
     isstart:false, //是否開始滾動數(shù)值
    };
  },
  methods: {
   acceptValue(val){ //接收當前的數(shù)值展示到頁面
    this.currentNum =val
   },
   goChoujiang(){ //更改抽獎
       this.isstart = !this.isstart
   }
  
  },
 }
</script>
 
 
<style scoped>
  .changeNum{
    color:red;
    font-size: 32px;
  }
  .btn{
    background-color: pink;
    box-shadow:0px 2px 4px 0px rgba(255,130,0,0.7)
  }
</style>

三、效果展示

以上就是“vue組件如何封裝實現(xiàn)抽獎隨機數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。