vue组件如何封装实现抽奖随机数

魁首哥

作者

vue组件如何封装实现抽奖随机数

今天小编给大家分享一下vue组件如何封装实现抽奖随机数的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、子组件

<template><div><slot></slot></div></template><script>exportdefault{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++//刷新次数+1vartim=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><stylescoped></style>

二、父组件

<template><divclass="aboutmarquee"><count-upvalue="99.99"decimals="0":isstart="isstart"@sendValue="acceptValue"><spanclass="changeNum">{{currentNum}}</span></count-up><buttonclass="btn"@click="goChoujiang">是否开始滚动</button></div></template><script>importcountUpfrom'../../components/countUp/countUp.vue';//下拉框带popup蒙层exportdefault{name:'cecountUp',components:{//注册组件countUp},data(){return{currentNum:"即将开始抽奖",//当前数值isstart:false,//是否开始滚动数值};},methods:{acceptValue(val){//接收当前的数值展示到页面this.currentNum=val},goChoujiang(){//更改抽奖this.isstart=!this.isstart}},}</script><stylescoped>.changeNum{color:red;font-size:32px;}.btn{background-color:pink;box-shadow:0px2px4px0pxrgba(255,130,0,0.7)}</style>