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

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

插件名称:v-number

发布时间:2020年4月9日

插件作者:maxflex

官网 演示 GitHub下载

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;
    }
  }
};

演示:

相关插件