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>
三、效果展示
四、所用知識點:
父子組件之間的傳值,定時器setInterval(),清楚定時器clearInterval(),tofixed()四舍五入方法
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。