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)

相关推荐

  • Vue组件实现数字滚动抽奖效果

    本文实例为大家分享了Vue组件实现数字滚动抽奖效果的具体代码,供大家参考,具体内容如下 可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意)不一一精简了 组件代码 <template>     <div class="info-span04" style="color: #333333;">         中奖号码:         <div style="ve

  • vue组件实现移动端九宫格转盘抽奖

    本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图 抽奖 因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿).先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果.明白了过程就好写了. 中间的按钮用的是css3的ani

  • vue简单实现转盘抽奖

    本文实例为大家分享了vue简单实现转盘抽奖的具体代码,供大家参考,具体内容如下 1.0 思路整理 转盘抽奖很常见,之前也没写过,现在有空来写写,分析如下: 1.1 转盘旋转 ----- 可以用 transform 的 rotate 来解决 1.2 旋转动画 ----- transition 过渡来处理 1.3 停留目标位置及中奖提示 ? ------ 通过控制旋转角度控制停留位置,中奖提示,考虑添加回调 1.1 开始行动 上面的思考,我们知道了大概要实现的步骤,首先我们搞张图片 这个圆盘有 10

  • vue实现大转盘抽奖功能

    本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="dial" v-wechat-title="$route.meta.title">     <div class="times">抽奖次数{{LuckyClick}}</div>     <!-- 转盘包裹 -->     <

  • vue3实现抽奖模板设置

    本文实例为大家分享了vue3实现抽奖模板设置的具体方法,供大家参考,具体内容如下 效果图 代码 <template>   <div>     <h4>抽奖模板设置</h4>     <div class="container">       <ul class="ul-box">         <li           v-for="(item,index) in list&

  • vue实现手机号码抽奖上下滚动动画示例

    本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家.具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Document</title> <meta name="viewport" content=

  • VUE实现大转盘抽奖

    UI 老规矩,先看下静态UI,以便于有个图像概念 初始参考各值参考图 方案分析-参数配置 核心思路: 将指针和中奖区域划分两部分,目前常规的效果,控制中奖区域旋转,然后停在指针处,当然控制指针也可以,一套思路,dom结构也比较简单,唯一算是复杂点的就是中奖区域,但是如果你足够懒,像我一样,你可以传递一张图也可以,完全依赖远端数据: 关于旋转位置 每个移动位置应均分,360/个数 === 每个奖品所占据的位置,以本文为例8个奖品位置,每个区域应为45deg,每个指针中心位置应为±22.5deg(±

  • 基于VUE实现的九宫格抽奖功能

    先给大家展示下效果图: HTML代码: <template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapp

  • vue实现宫格轮转抽奖

    vue实现宫格轮转抽奖(类似穿越火线的xx轮回),供大家参考,具体内容如下 不做过多的解说,直接上代码啦.关键的代码都写了注释,很容易理解.直接复制即可使用! 另外css部分依赖 node-sass.sass-loader,没有安装的安装一下,已有的小伙伴直接跳过~~ "node-sass": "^4.12.0", "sass-loader": "^8.0.2", <template> <div class=

  • Vue.js实现大转盘抽奖总结及实现思路

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz

随机推荐