Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-number-counter

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-number-counter

A Vue.js project, (基于vue2的数字滚动(翻牌)插件)

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-number-counter

基于vue2的数字滚动(翻牌)插件

特点1:传给插件的value类型,支持String和Number类型;
特点2:当传给插件的value是Number类型时,支持千位分隔符格式(用于金额、标价等),支持自定义小数位数;
特点3:支持自定义字符表,支持每个字符在激活状态下的样式控制;

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演示:

avatar

Demo参考:

https://github.com/hz-ljq/vue-number-counter/blob/master/src/components/Demo.vue

Props

NameTypeDefaultDescription
:valueString/Number"0"要进行动画效果的数字或者字符串
:optionObjectduration: 2000,
characterWidth: 16,
addCharacter: [],
replaceCharacterMap: [],
decimals: 2,
thousandsSeparatorFlag: false
配置项

:option(Detail explanation)

NameTypeDefaultDescription
durationNumber2000(单位:ms)字符或数字滚动的动画过渡时间;
characterWidthNumber16(单位:px)每个字符所占的宽度;
addCharacterArray[]向默认的字符表里追加新的字符,必须是单字符数组,比如:['♪', '∮'];
replaceCharacterMapArray[]替换默认的字符表;
decimalsNumber2四舍五入小数位数(只在:value参数是Number类型时,才有效);
thousandsSeparatorFlagBooleanfalse是否需要添加千位分隔符(只在:value参数是Number类型时,才有效);

addCharacter属性和replaceCharacterMap属性,区别:

默认的字符表:[",", "+", "-", ".", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"];

  • addCharacter:在默认的字符表基础上新增字符;
  • replaceCharacterMap:用新的字符表,替换默认的字符表;
  • 区别:后者可以控制字符表内字符的顺序;

Keywords

FAQs

Package last updated on 30 Aug 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc