数字自增动画小组件

1,115 阅读1分钟

下面的组件代码!

<template>    <i class="num-content">{{num}}</i></template><script>export default {    props: {        number: { type: Number, default: 0 },        // 结果值        during: { type: Number, default: 1 },        // 动画时长        plusFlag: { type: Boolean, default: false }  // 动画开关    },    data(){        return{            num: 0,            timerId: '',        }    } ,    methods: {        startPlus() {            /** setInterval有时间间隔最小值,为10ms */            var step = (this.number / 1000 / this.during) * 10;            if(step < 1){                step = 1;            }            this.timerId = setInterval(() => {                if(this.num + step >= this.number) {                    this.num = this.number;                    clearInterval(this.timerId);                }else {                    this.num += step;                }            }, this.during*1000/this.number);        }    },    watch: {        plusFlag(val){            if(val) {                this.startPlus();            }        }    }}</script>

直接引入父组件注册后就可以用了哦