Vue Odometer
made with Vuejs

Vue Odometer

这是数字滚动效果组件Odometer.js的Vue.js版本。

简介及使用教程

Vue Odometer是数字滚动效果组件Odometer.js的Vue.js版本,可以轻松平滑地转换数字。

安装

Npm

npm i v-odometer

Yarn

yarn add v-odometer

使用

引入

import VueOdometer from 'v-odometer/src'

在你组件中注册

Vue.component('my-component', {
    components: {
        'vue-odometer': VueOdometer
    }
    // ...
})

或者,全局注册

Vue.component('vue-odometer', VueOdometer);

使用

<vue-odometer :value="mynumber" class="myClassName"></vue-odometer>

选项

value: { type: Number, default: () => 0 },
theme: { type: String, default: () => 'minimal' },
format: { type: String, default: () => '(.ddd),dd' },
duration: { type: Number, default: () => 3000 },    
className: { type: String, default: () => 'odometer' },    
animation: { type: String, default: () => 'count' },    
formatFunction: { type: Function },

示例

image.png

作者

Jeffery ThaGintoki

相关项目