水陆运输类网站如何建设,wordpress上传织梦,怎么改网站关键词,东道网站建设countup.js 是一个轻量级的 JavaScript 库#xff0c;允许你为网站上显示统计数据或计数器时平滑地动画化数字。CountUp 类被用来创建计数器实例#xff0c;可以平滑地从一个数值变化到另一个数值。 只是用户视觉更好一些。 1、安装插件
npm i countup.js2、个人是封装了组件… countup.js 是一个轻量级的 JavaScript 库允许你为网站上显示统计数据或计数器时平滑地动画化数字。CountUp 类被用来创建计数器实例可以平滑地从一个数值变化到另一个数值。 只是用户视觉更好一些。 1、安装插件
npm i countup.js2、个人是封装了组件
1. 使用组件
import countup from /components/countup.vue;div classcard-contentcountup classcard-num color1 :end6666 /div用户访问量/div
/div
1. 组件
options 初始值其实没有太过要求因为一瞬间就过去了可以设置也可以不设置如果用户要求较高可以进行调节
templatespan refcountRef/span
/templatescript setup
import { onMounted, ref, watch } from vue;
import { CountUp } from countup.js;const props defineProps({end: {type: Number,required: true,},options: {type: Object,default: () ({}),required: false,},
});
const countRef ref(null);
let countUp;// props.options 初始配置
// let options {
// startVal: 700, //初始值
// duration: 10, // 动画持续时间秒不设置动画速度最快
// useEasing: true, // 使用缓动效果
// useGrouping: true, // 使用分组分隔符如1,000
// smartEasingThreshold: 10, //对于高于此值的大数进行平滑缓动
// separator: ,, //分隔符逗号
// decimal: ., //小数点
// }onMounted(() { // props.end 结束值countUp new CountUp(countRef.value, props.end, props.options);if (countUp.error) {console.error(countUp.error);return;}countUp.start();
});watch(() props.end,(newVal) {if (countUp) {countUp.update(newVal);}}
);
/script
