vue-number-counter
vue-number-counter
基于vue2的数字滚动(翻牌)插件
特点1:传给插件的value类型,支持String和Number类型;
特点2:当传给插件的value是Number类型时,支持千位分隔符格式(用于金额、标价等),支持自定义小数位数;
特点3:支持自定义字符表,支持每个字符在激活状态下的样式控制;
Demo演示:
NPM
npm install vue-number-counter --save
Mount
- mount with global
import Vue from 'vue'
// require styles
import 'vue-number-counter/dist/vue-number-counter.css'
import VueNumberCounter from 'vue-number-counter'
Vue.use(VueNumberCounter)
- mount with component
// require styles
import 'vue-number-counter/dist/vue-number-counter.css'
import { VueNumberCounter } from 'vue-number-counter'
export default {
components: {
VueNumberCounter
}
}
Usage
<div class='my-wrapper'>
<div class='my-title'>My Number: </div>
<vue-number-counter class='my-number' :value="17842.7129" :option='myOption' />
</div>
Demo参考:
https://github.com/hz-ljq/vue-number-counter/blob/master/src/components/Demo.vue
Props
Name | Type | Default | Description |
---|---|---|---|
:value | String/Number | "0" | 要进行动画效果的数字或者字符串 |
:option | Object | duration: 2000, characterWidth: 16, addCharacter: [], replaceCharacterMap: [], decimals: 2, thousandsSeparatorFlag: false |
配置项 |
:option(Detail explanation)
Name | Type | Default | Description |
---|---|---|---|
duration | Number | 2000(单位:ms) | 字符或数字滚动的动画过渡时间; |
characterWidth | Number | 16(单位:px) | 每个字符所占的宽度; |
addCharacter | Array | [] | 向默认的字符表里追加新的字符,必须是单字符数组,比如:['♪', '∮']; |
replaceCharacterMap | Array | [] | 替换默认的字符表; |
decimals | Number | 2 | 四舍五入小数位数(只在:value参数是Number类型时,才有效); |
thousandsSeparatorFlag | Boolean | false | 是否需要添加千位分隔符(只在:value参数是Number类型时,才有效); |
addCharacter属性和replaceCharacterMap属性,区别:
// 默认字符表;
characterMap: [',', '+', '-', '.', '9', '8', '7', '6', '5', '4', '3', '2', '1', '0']
- addCharacter:在默认的字符表基础上新增字符;
- replaceCharacterMap:用新的字符表,替换默认的字符表;
- 区别:后者可以控制字符表内字符的顺序;
通过.active-number类名,可以控制每个字符在激活状态下的样式,比如:
.active-number {
color: white;
text-shadow: 1px 1px red,2px 2px red;
}
效果如下:
Dependencies
autoprefixer: ^7.1.2babel-core: ^6.22.1babel-eslint: ^8.2.1babel-helper-vue-jsx-merge-props: ^2.0.3babel-loader: ^7.1.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.5.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0chalk: ^2.0.1copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0eslint: ^4.15.0eslint-config-standard: ^10.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.7.1eslint-plugin-import: ^2.7.0eslint-plugin-node: ^5.2.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^3.0.1eslint-plugin-vue: ^4.0.0extract-text-webpack-plugin: ^3.0.0file-loader: ^1.1.4friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^2.30.1node-notifier: ^5.1.2node-sass: ^4.9.3optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.2.0portfinder: ^1.0.13postcss-import: ^11.0.0postcss-loader: ^2.0.8postcss-url: ^7.2.1rimraf: ^2.6.0sass-loader: ^7.1.0scss-loader: ^0.0.1semver: ^5.3.0shelljs: ^0.7.6uglifyjs-webpack-plugin: ^1.1.1url-loader: ^0.5.8vue: ^2.5.17vue-loader: ^13.3.0vue-style-loader: ^3.0.1vue-template-compiler: ^2.5.2webpack: ^3.6.0webpack-bundle-analyzer: ^2.9.0webpack-dev-server: ^2.9.1webpack-merge: ^4.1.0