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组件如何封装实现抽奖随机数”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。