快捷導(dǎo)航

vue組件封裝實現(xiàn)抽獎隨機數(shù)

更新時間：2022年03月09日 14:36:17 作者：12歲零120個月的孩子

這篇文章主要為大家詳細介紹了vue組件封裝實現(xiàn)抽獎隨機數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue組件封裝實現(xiàn)抽獎隨機數(shù)的具體代碼，供大家參考，具體內(nèi)容如下

一、子組件

<template>
? ? <div>
? ? ?<slot></slot>
? ? </div>
</template>
?
?
<script>
? ? ?export default {
? ? ? ? ?name:'countUp',
? ? ? ? ?props:{
? ? ? ? ? ? ?lastSymbol:{
? ? ? ? ? ? ? ? ?type:String,
? ? ? ? ? ? ? ? ?default:" 位" ?
? ? ? ? ? ? ?},
? ? ? ? ? ? ?value:{ //滾動結(jié)束最終顯示數(shù)字
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:100,
? ? ? ? ? ? ?},
? ? ? ? ? ? ?from:{ // 開始時的數(shù)字
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:0
? ? ? ? ? ? ?},
? ? ? ? ? ? ?speed:{ // 總時間
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:2000,
? ? ? ? ? ? ?},
? ? ? ? ? ? ?refreshInterval:{ // 刷新一次的時間
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:10,
? ? ? ? ? ? ?},
? ? ? ? ? ? ?beforeSize:{ //小數(shù)點前最小顯示位數(shù)，不足的話用0代替?
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:0
? ? ? ? ? ? ?},
? ? ? ? ? ? ?decimals:{ // 小數(shù)點后的位數(shù)，小數(shù)做四舍五入
? ? ? ? ? ? ? ? ?type:[String,Number],
? ? ? ? ? ? ? ? ?default:2
? ? ? ? ? ? ?},
? ? ? ? ? ? ?isstart:{ //是否開始滾動
? ? ? ? ? ? ? ? ?type:Boolean,
? ? ? ? ? ? ? ? ?default:true
? ? ? ? ? ? ?}
? ? ? ? ?},
? ? ? ? data(){
? ? ? ? ?return{
? ? ? ? ? ? ?loops:'', //刷新次數(shù)
? ? ? ? ? ? ?increment:'', //刷新一次增加的數(shù)值
? ? ? ? ? ? ?loopCount:'', //記錄刷新的次數(shù)
? ? ? ? ? ? CurrentValue:'', ?//開始時候的數(shù)字
? ? ? ? ? ? interval:'', //定時器
? ? ? ? ? ? sizeNum:'',//當前數(shù)字的長度
? ? ? ? ? ? sizeNumBefore:'', //當前數(shù)字小數(shù)點前的位數(shù)
? ? ? ? ? ? ? }
?
? ? ? ? ? },
? ? ? ? ?watch:{
? ? ? ? ? ? isstart(val){
? ?
? ? ? ? ? ? ? ? if(val){
? ? ? ? ? ? ? ? ? this.start()
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? clearInterval(this.interval);
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? }
? ? ? ? ?},
? ? ? ? methods:{
? ? ? ? ? ? start(){
? ? ? ? ? ? ? ?this.loops = Math.ceil(this.speed / this.refreshInterval)//刷新次數(shù)
?
? ? ? ? ? ? ? ? this.increment = (this.value - this.from)/this.loops ?//（結(jié)束的數(shù)字-開始的數(shù)字）/刷新次數(shù) ，刷新一次增加的數(shù)值
? ? ? ? ? ? ? ? this.loopCount = 0 //記錄刷新的次數(shù)
? ? ? ? ? ? ? ? this.CurrentValue = this.from //開始時候的數(shù)字
?
? ? ? ? ? ? ? ? this.interval = setInterval(this.updateTimer,this.refreshInterval) //設(shè)置定時器，沒個一段時間就執(zhí)行
? ? ? ? ? ? },
? ? ? ? ? ? updateTimer(){ //刷新一次數(shù)值疊加
? ? ? ? ? ? ?this.CurrentValue+=this.increment //當前展示的值
? ? ? ? ? ? ?this.loopCount++ //刷新次數(shù)+1
? ? ? ? ? ? ?
? ? ? ? ? ? var tim = this.CurrentValue.toFixed(this.decimals) //對當前值進行四舍五入 ,tim四射物質(zhì)之后的當前數(shù)值
?
? ? ? ? ? ? ?this.sizeNum = String(tim).length;
? ? ? ? ? ? ?
? ? ? ? ? ? ?this.sizeNumBefore = this.sizeNum - this.decimals - 1;
? ? ? ? ? ? ??
? ? ? ? ? ? ?if(this.sizeNumBefore>=this.beforeSize){ //當前數(shù)字的小數(shù)點位數(shù)》=要求的小數(shù)點前位數(shù)
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?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:"即將開始抽獎", //當前數(shù)值
? ? ?isstart:false, //是否開始滾動數(shù)值
? ? };
? },
? methods: {
? ?acceptValue(val){ //接收當前的數(shù)值展示到頁面
? ? 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>