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