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

相关项目

这是一个Vue.js 2打字机效果组件 。
这是一个基于Vue.js的循环图像序列播放器。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个实现Material设计风格的纹波效果的插件。