Vue.js的动画数字过渡和点赞计数器库 - v-number

Vue.js的动画数字过渡和点赞计数器库 - v-number
插件名称 v-number
发布时间 2020年4月9日
插件作者 maxflex

v-number是Vue.js组件,用于对计数器应用平滑的垂直数字过渡效果。

安装和下载:

# Yarn
$ yarn add @maxflex/v-number
# NPM
$ npm install @maxflex/v-number --save

使用:

1.安装并导入v-number组件。

import { VNumber } from "@maxflex/v-number";

2.将v-number组件插入您的应用模板。

<v-number v-model="someNumber"></v-number>

3.注册组件并创建一个基本的类似计数器。

export default {
  components: {
    VNumber
  },
  data() {
    return {
      number: 1,
      likes: 153,
      isLiked: false,
      intervalSpeed: 2000,
      interval: null
    };
  },
  created() {
    this.startInterval();
  },
  methods: {
    startInterval() {
      this.interval = setInterval(() => this.number++, this.intervalSpeed);
    },
    clearInterval() {
      clearInterval(this.interval);
    },
    like() {
      this.likes += 1;
    }
  }
};

演示: