From 2d6ec7162f446b64fe395a7e77894277b9385d96 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 13 三月 2024 10:57:06 +0800
Subject: [PATCH] feat:添加数据缓动效果
---
src/views/home/data-view/components/data-icon.vue | 37 +++++++++++++++++++++++++++++++++++--
1 files changed, 35 insertions(+), 2 deletions(-)
diff --git a/src/views/home/data-view/components/data-icon.vue b/src/views/home/data-view/components/data-icon.vue
index c5335fb..c793f56 100644
--- a/src/views/home/data-view/components/data-icon.vue
+++ b/src/views/home/data-view/components/data-icon.vue
@@ -7,7 +7,7 @@
<i :class="iconList[index].icon" class="icon-font"></i>
</div>
<div class="data-info">
- <div class="data-num">{{ item.value }}</div>
+ <div class="data-num" v-inserted :value="item.value">{{ item.value }}</div>
<div class="data-lable">{{ item.name }}</div>
</div>
</div>
@@ -17,7 +17,7 @@
</template>
<script>
-
+import gsap from 'gsap';
const nameList = {
data1: '宸ュ崟鏁�',
data2: '鎭㈠鏁�',
@@ -25,6 +25,7 @@
data4: '浜х敓杩濈害浜嬮」鏁�',
data5: '浜х敓杩濈害璐ｄ换鏁�',
}
+
export default {
@@ -72,6 +73,38 @@
immediate: true,
}
},
+ directives: {
+ inserted: {
+ bind(el, binding) {
+ let target = {
+ count: 0
+ };
+ let finalNumber = el.innerText;
+ gsap.to(target, {
+ count: finalNumber,
+ duration: 1,
+ ease: "power2.out",
+ onUpdate: () => {
+ el.innerText = target.count.toFixed(0);
+ }
+ })
+ },
+ update(el, binding) {
+ let target = {
+ count: el.innerText
+ };
+ let finalNumber = el.getAttribute('value');
+ gsap.to(target, {
+ count: finalNumber,
+ duration: 1,
+ ease: "power2.out",
+ onUpdate: () => {
+ el.innerText = target.count.toFixed(0);
+ }
+ })
+ }
+ }
+ }
}
</script>
--
Gitblit v1.8.0