封装一个好玩的小插件 - 01 - 计数

策码奔腾---嘚驾~

于 2021-09-07 17:36:34 发布

阅读量201

点赞数

文章标签： html5 html css

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/120163187

版权

该博客介绍了一个Vue组件`vCountUp`，它使用`countup.js`库来创建动态数字计数效果。当路由切换到`/index`时，组件会在800毫秒后初始化计数动画，展示`homeData.xd.todo+homeData.xd.done`的总和。此组件适用于前端界面中需要动态展示统计数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <span ref="refData"></span>
</template>
<script>
import { CountUp } from "countup.js";
export default {
  props: {
    countNum: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (val.fullPath == "/index") {
          setTimeout(() => {
            this.initCountUp(this.countNum);
          }, 800);
        }
      },
      // 深度观察监听
      deep: true,
    },
    countNum(val) {
      this.initCountUp(val);
    },
  },
  data() {
    return {
      numAnim: null,
    };
  },
  mounted() {
    this.initCountUp(this.countNum);
  },
  methods: {
    initCountUp(num) {
      this.numAnim = new CountUp(this.$refs.refData, num);
      this.numAnim.start();
    },
  },
};
</script>

<vCountUp :countNum="homeData.xd.todo + homeData.xd.done"></vCountUp>


import vCountUp from "@/components/countUp/countUp.vue";

export default {
  name: "index",
  components: { vCountUp },