feat:添加数据缓动效果

ZhangXianQiang

2024-03-13 2d6ec7162f446b64fe395a7e77894277b9385d96

 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>