组件代码
<template>
<div class="numcardInner">
<span :class="className" v-if="show">{{ num }}</span>
</div>
</template>
<script>
import '@/utils/jquery.leoTextAnimate'
import $ from 'jquery'
export default {
name: 'newNumcard',
components: {},
props: {
num: {
type: String | Number,
default() {
return ''
}
}
},
data() {
return {
show: true,
className: ""
}
},
watch: {
num() {
this.show = false
this.$nextTick(() => {
this.show = true
setTimeout(() => {
$('.' +this.className).leoTextAnimate({
delay: 2000,
speed: 3000,
autorun: true,
fixed: [',', ':', '.'],
start: '-'
})
}, 10)
})
}
},
mounted() {
// 初始动画
this.className = 'num' + this.randomString(10)
this.$nextTick(() => {
$('.' + this.className).leoTextAnimate({
delay: 2000,
speed: 3000,
autorun: true,
fixed: [',', ':', '.'],
start: '-'
})
})
},
methods: {
randomString(e) {
e = e || 32;
var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
a = t.length,
n = "";
for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
return n
},
}
}
</script>
<style lang="scss" scoped>
.numcard {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
span {
font-size: 30px;
font-family: DIN;
font-weight: bold;
}
}
</style>
调整记录
2022年08月04日
相同的class名称会导致页面内多个数字互相干扰，导致动画重复渲染。改为class随机生成。
当数字变化后，动画没有触发，增加数字监听，数字变化后触发动画。
需要的插件
<script src="https://www.wanjunshijie.com/plugin/jquery.leoTextAnimate.js"></script>
