vue組件如何封裝實現抽獎隨機數

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

一、子組件

<template>
    <div>
     <slot></slot>
    </div>
</template>
 
 
<script>
     export default {
         name:'countUp',
         props:{
             lastSymbol:{
                 type:String,
                 default:" 位"  
             },
             value:{ //滾動結束最終顯示數字
                 type:[String,Number],
                 default:100,
             },
             from:{ // 開始時的數字
                 type:[String,Number],
                 default:0
             },
             speed:{ // 總時間
                 type:[String,Number],
                 default:2000,
             },
             refreshInterval:{ // 刷新一次的時間
                 type:[String,Number],
                 default:10,
             },
             beforeSize:{ //小數點前最小顯示位數，不足的話用0代替 
                 type:[String,Number],
                 default:0
             },
             decimals:{ // 小數點后的位數，小數做四舍五入
                 type:[String,Number],
                 default:2
             },
             isstart:{ //是否開始滾動
                 type:Boolean,
                 default:true
             }
         },
        data(){
         return{
             loops:'', //刷新次數
             increment:'', //刷新一次增加的數值
             loopCount:'', //記錄刷新的次數
            CurrentValue:'',  //開始時候的數字
            interval:'', //定時器
            sizeNum:'',//當前數字的長度
            sizeNumBefore:'', //當前數字小數點前的位數
              }
 
          },
         watch:{
            isstart(val){
   
                if(val){
                  this.start()
                }else{
                  clearInterval(this.interval);
                }
 
            }
         },
        methods:{
            start(){
               this.loops = Math.ceil(this.speed / this.refreshInterval)//刷新次數
 
                this.increment = (this.value - this.from)/this.loops  //（結束的數字-開始的數字）/刷新次數 ，刷新一次增加的數值
                this.loopCount = 0 //記錄刷新的次數
                this.CurrentValue = this.from //開始時候的數字
 
                this.interval = setInterval(this.updateTimer,this.refreshInterval) //設置定時器，沒個一段時間就執行
            },
            updateTimer(){ //刷新一次數值疊加
             this.CurrentValue+=this.increment //當前展示的值
             this.loopCount++ //刷新次數+1
             
            var tim = this.CurrentValue.toFixed(this.decimals) //對當前值進行四舍五入 ,tim四射物質之后的當前數值
 
             this.sizeNum = String(tim).length;
             
             this.sizeNumBefore = this.sizeNum - this.decimals - 1;
              
             if(this.sizeNumBefore>=this.beforeSize){ //當前數字的小數點位數》=要求的小數點前位數
               
               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:"即將開始抽獎", //當前數值
     isstart:false, //是否開始滾動數值
    };
  },
  methods: {
   acceptValue(val){ //接收當前的數值展示到頁面
    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組件如何封裝實現抽獎隨機數”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。