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()四舍五入方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)