使用countup.js制作数字滚动效果
2023-12-31 17:50:41
1、数字定时刷新,显示从0变动到最终数的效果,字体可以下载不同的字体包。
2、先下载 countup.js,
npm install countup.js --S
3、设置了保留两位小数的情况和整数情况。
<template>
<div class="summary-data">
<div class="item" v-for="(item, itemIndex) in config" :key="itemIndex">
<div class="img">
<img v-if="itemIndex === 0" src="../../../assets/imgs/roomTempCount.png" />
<img v-if="itemIndex === 1" src="../../../assets/imgs/avgTemp.png" />
<img v-if="itemIndex === 2" src="../../../assets/imgs/roomTempCount.png" />
</div>
<div class="name">{{ item?.name }}</div>
<div class="data">
<span class="value" ref="valueRef">{{
summaryData?.[item?.valueKey] || '--' }}</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, ref, watch } from 'vue'
import { CountUp } from 'countup.js'
export default defineComponent({
components: {
},
props: {
roomData: {
type: Object,
default: () => ({})
},
},
setup(props) {
const valueRef = ref([]);
const state = reactive({
config: [
{
name: '安装数',
valueKey: 'roomTempCount',
}, {
name: '温度',
valueKey: 'roomTemp',
},
{
name: '达标',
valueKey: 'complianceRate',
},
],
summaryData: {},
// 数字动效的参数配置
optionsOne: {
decimalPlaces: 2, //保留两位小数
separator: '', // 千分位分隔符符号
},
// 保留整数情况
optionsTwo: {
decimalPlaces: 0, //整数
separator: '', // 千分位分隔符符号
},
})
const methods = {
getData() {
const obj1 = { roomTempCount: 7962 }
// props.roomData = {
complianceRate: "67.19"
roomTemp: "19.84"
}
state.summaryData = { ...obj1, ...props.roomData }
let option = {};
state.config.forEach((item, index) => {
// / 如果是.00的话,去掉.00,取整数
if (Number(state.summaryData[item.valueKey]).toString().indexOf('.') === -1) {
option = state.optionsTwo
} else {
option = state.optionsOne;
}
const countUp = new CountUp(valueRef.value[index], state.summaryData[item.valueKey], option);
countUp.start();
})
},
};
const timer = ref(null)
onUnmounted(() => {
clearInterval(timer.value);
})
onMounted(() => {
methods.getData();
timer.value = setInterval(() => {
methods.getData();
}, 1000 * 20);
})
watch(() => props.roomData, (newVal) => {
if (newVal) {
methods.getData();
}
}, {
immediate: true,
})
return {
...toRefs(state),
...methods,
valueRef,
}
}
})
</script>
<style lang="less" scoped>
@font-face {
font-family: "DIN";
/*定义字体名*/
src: url(../../../assets/font/D-DINCondensed-Bold.ttf);
/*字体包的引入路径*/
}
.summary-data {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.item {
display: flex;
flex-direction: column;
// align-items: flex-end;
position: relative;
padding-top: 10px;
.img {
// width: 51px;
// height: 51px;
// margin-top: 11px;
}
.name {
position: absolute;
top: 9%;
width: 140px;
text-align: center;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #61A9E8;
line-height: 22px;
}
.data {
flex: 1;
height: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, 0%);
.value {
font-size: 36px;
font-family: DIN;
color: #FFFFFF;
line-height: 50px;
}
}
}
}
</style>
文章来源:https://blog.csdn.net/m0_62323730/article/details/135317256
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!