项目场景:
提示:这里简述项目相关背景:
在有些时候比如在做C端项目的时候,页面一般需要一些炫酷效果,比如数字会从小值自动加到数据返回的值
css 数字从0开始增加的动画效果

分析:
提示:这里填写问题的分析:
可以使用自定义属性,让自定义属性的值自动从小值一直自动加到与后端返回的值一样大,
这里需要注意一点,需要在节点挂载完成后才可以,不然,给节点加属性的时候找不到哪个节点,
另外也要拿到后端返回的值,因为自动加到的值与后端返回的一样才行,
解决方案:
提示:这里填写该问题的具体解决方案:
html
<template>
<div
ref="observerElement"
class="observed-element flexEv bannerBg padTB100 padLR65 colorW">
<div class="flex" v-for="item in props.bannerInfo">
<div class="borderR paddingR20 flexC">
<i
:class="item.icon"
class="iconfont fontS40 fontW4 colorW hoverS"></i>
</div>
<div class="paddingL20">
<div
ref="numRef"
class="fontS26 fontW6 marginB10 number inLb"
:data-target="item.textTop"></div>
<div class="fontS26 fontW6 inLb">+</div>
<div class="fontS18 fontW5">{{item.textBottom}}</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {
reactive,
toRefs,
ref,
Ref,
PropType,
onMounted,
onBeforeUnmount,
} from "vue"
const props=defineProps({
//
bannerInfo:{
type:Array
},
})
// 自动将数值加到会后那个值的方法
const changeNum=()=>{
// 获取元素
const numbers = document.querySelectorAll('.number')
console.log("",numbers)
// 获取所有的dom,querySelectorAll为为数组
numbers.forEach(item => {
item.textContent = "0";
const upDateNumber = () => {
// 获取每个类名为number的data-target,即获取最大值
const target = Number(item.getAttribute('data-target'))
// 获取当前div的数值
const d = Number(item.textContent)
// 设置数据增加的值,可以通过target除的数值确定怎么加数值的快慢
const increment = target / 100
// 当数字小于最大值时,执行下面的操作
if (d < target) {
// 向上取整
item.textContent = `${Math.ceil(d + increment)}`
// 1ms重新调用,不然它会在第一次运行完就结束
setTimeout(upDateNumber, 1000)
} else {
item.textContent = target+"";//textContent的值是 字符串 所以加个空字符
}
}
upDateNumber()
})
}
// 在节点挂载完成后 再执行
onMounted(()=>{
console.log()
changeNum()
})
onBeforeUnmount(()=>{
console.log()
})
const emit =defineEmits([
""
])
</script>
<style lang="less" scoped>
.bannerBg{
background-color:#1d7b51 ;
}
.borderR{
border-right: 1px solid #ffffff;
}
</style>