From 16eb67ab6b103663d30cad9ba74360f982e131cb Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 九月 2024 10:34:59 +0800
Subject: [PATCH] 自定义列显隐控制
---
src/views/home/data-view/components/data-icon.vue | 43 ++++++++++++++++++++++++++++++++++++++-----
1 files changed, 38 insertions(+), 5 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..4bc3662 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,14 +17,15 @@
</template>
<script>
-
+import gsap from 'gsap';
const nameList = {
data1: '宸ュ崟鏁�',
data2: '鎭㈠鏁�',
data3: '寰呮仮澶嶆暟',
- data4: '浜х敓杩濈害浜嬮」鏁�',
- data5: '浜х敓杩濈害璐ｄ换鏁�',
+ 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>
@@ -124,4 +157,4 @@
text-indent: 3px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0