数字自动增长vue-countupjs与countUp.js

cxy_xiaowu

已于 2022-10-20 10:55:49 修改

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端

于 2022-10-20 10:16:09 首次发布

本文链接：https://blog.csdn.net/asdad22/article/details/127421463

版权

基于 CountUp.js 的 Vue 组件, 简易数字动画跳动
安装：

1.安装vue-countupjs

npm install vue-countupjs --save

2.使用

在对应页面引入vue-countupjs注册组件

<template>
  <div>
    <VueCountUp :start-value="0" :end-value="1023131330" options  :duration ="2"	/>
  </div>
</template>

<script>
import VueCountUp from 'vue-countupjs'
export default {
  name: 'countUp',
  components: {
    VueCountUp,
  },
  props: {},
  data() {
    return {
      options: {
        useEasing: true, // 使用缓和
        useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
        separator: ',', // 分隔器(千位分隔符,默认为',')
        decimal: '.', // 十进制(小数点符号,默认为 '.')
        prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
        suffix: '', // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="scss"></style>

3.参数

属性   意义   默认值
tag   数字的包装器   span
startValue   起始值   0
endValue   结束值   0
decimals   小数位数，默认为 0   0
duration   动画持续时间，默认为 2 s   2
delay   延时更新时间, 0 为不延时   0
immediate   是否立即执行动画   true
options   countup配置项   下图代码
animateClass   执行期间动画, 执行后删除，优先级低于animatedClass   null
animatedClass   执行前插入, 执行后删除   animated

4.使用及传参规则

# vue-countupjs
>  基于 CountUp.js 的 Vue 组件, 简易数字动画跳动
>  默认使用 `window.requestAnimFrame` 动画桢进行更新跳动数字


## Installation

**使用npm安装**

```
  npm install vue-countupjs
```

**浏览器**
```html
<script src='https://unpkg.com/vue@2.3.3'></script>
<script src='https://unpkg.com/vue-countupjs'></script>
```

## Example

**webpack引用**

```html
  <div id="app"></div>
```
```javascript
import Vue from 'vue'
import VueCountUp from 'vue-countupjs'
new Vue({
  el: '#app',
  render (h) {
    return h(VueCountUp.component, {
      props: {
        start: 1,
        endt: 100
      }
    }, '')
  }
})
```

**浏览器直接引用**
```html
  <body>
    <div id="app">
      <v-countup :start-value="start" :end-value="end"></v-countup>
    </div>
    <script src='https://unpkg.com/vue@2.3.3'></script>
    <script src='https://unpkg.com/vue-countupjs'></script>
    <script>
      Vue.use(VueCountUp)
      var app = new Vue({
        data: {
          start: 1,
          end: 100
        },
        el: "#app"
      })
    </script>
  </body>
```
[jsFiddle 地址](https://jsfiddle.net/liyl/mnz95c42/)

## Documentantion

**-- tag**

default: `span`

desc: 数字的包装器


**-- startValue**

default: `0`

desc: 起始值

**-- endValue**

default: `0`

desc: 结束值

**-- decimals**

default: `0`

desc: 小数位数， 默认为 `0`

**-- duration**

default: `2`

desc: 动画持续时间， 默认为 `2` s

**-- delay**

default: `0`

desc: 延时更新时间, `0` 为不延时

**-- immediate**

default: `true`

desc: 是否立即执行动画


**-- options**

type: `object`

default:  

```javascript
{
  useEasing: true, // 缓动动画 easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // 数字分隔符
  decimal: '.', // 小数分隔符
  prefix: '', // 前缀
  suffix: '' // 后缀
}
```

desc: countup配置项

**-- animateClass**

type: `string` or `array`

required: false

desc: 执行期间动画, 执行后删除，优先级低于`animatedClass`

**-- animatedClass**

type: `string`

default: `animated`

desc: 执行前插入, 执行后删除

基于 CountUp.js , 简易数字动画跳动

1.安装counup.js

npm install --save countup.js vue-countup-v2

2.使用

方案一：

<template>
	<div class="count-to-wrapper">
		<slot name="left"/>
			<p class="content-outer">
				<ICountUp :class="['count-to-count-text', countClass]" :delay="delay" :endVal="end" :options="options" @ready="onReady"/>
			</p>
		<slot name="right"/>
	</div>
</template>

<script>
import ICountUp from 'vue-countup-v2'
import './index.less'
export default {
	name: 'CountTo',
	components: {
		ICountUp
	},
	props: {
		/**
		 * @description 结束值，即动画结束后显示的数值
		 */
		end: {
			type: Number,
			required: true
		},
		/**
		 * @description 动画延迟开始的时间，单位是秒
		 */
		delay: {
			type: Number,
			default: 0
		},
		// options
		/**
		 * @description 起始值，即动画开始前显示的数值
		 */
		startVal: {
			type: Number,
			default: 0
		},
		/**
		 * @description 保留几位小数
		 */
		decimals: {
			type: Number,
			default: 0
		},
		/**
		 * @description 动画持续的时间，单位是秒
		 */
		duration: {
			type: Number,
			default: 2
		},
		/**
		 * @description 是否使用分组，分组后每三位会用一个符号分隔
		 */
		usegroup: {
			type: Boolean,
			default: true
		},
		/**
		 * @description 是否禁用easing动画效果
		 */
		uneasing: {
			type: Boolean,
			default: false
		},
		/**
		 * @description 用于分组(usegroup)的符号
		 */
		separator: {
			type: String,
			default: ','
		},
		/**
		 * @description 分隔整数和小数的符号，默认是小数点
		 */
		decimal: {
			type: String,
			default: '.'
		},
		// simplify
		/**
		 * @description 是否简化显示，设为true后会使用unit单位来做相关省略
		 */
		simplify: {
			type: Boolean,
			default: true
		},
		/**
		 * @description 自定义单位，如[3, 'K+'], [6, 'M+']即大于3位数小于6位数的用k+来做省略
		 *              1000即显示为1K+
		 */
		unit: {
			type: Array,
			default () {
				return [[3, 'K+'], [6, 'M+'], [9, 'B+']]
			}
		},
		countClass: {
			type: String,
			default: ''
		},
		unitClass: {
			type: String,
			default: ''
		}
	},
	data () {
		return {
			options: {
				startVal: this.startVal, // number to start at (0)
				decimalPlaces: this.decimals, // number of decimal places (0)
				duration: this.duration, // animation duration in seconds (2)
				useGrouping: this.usegroup, // example: 1,000 vs 1000 (true)
				useEasing: !this.uneasing, // ease animation (true)
				smartEasingThreshold: 999, // smooth easing for large numbers above this if useEasing (999)
				smartEasingAmount: 333, // amount to be eased for numbers above threshold (333)
				separator: this.separator, // grouping separator (',')
				decimal: this.decimal, // decimal ('.')
				// easingFn: easing function for animation (easeOutExpo)
				// easingFn: (t: number, b: number, c: number, d: number) => number;
				// formattingFn: (n: number) => string; // this function formats result
				formattingFn: this.getValue,
				prefix: '', // text prepended to result
				suffix: ''// text appended to result
				// numerals: string[]; // numeral glyph substitution
			},
			unitText: ''
		}
	},
	methods: {
		// 完成
		onReady: function(instance, CountUp) {
			// const that = this;
			// instance.update(that.endVal + 1000);
		},
		getHandleVal (val, len) {
			return {
				endVal: parseInt(val / Math.pow(10, this.unit[len - 1][0])),
				unitText: this.unit[len - 1][1]
			}
		},
		transformValue (val) {
			const len = this.unit.length
			let res = {
				endVal: 0,
				unitText: ''
			}
			if (val < Math.pow(10, this.unit[0][0])) res.endVal = val
			else {
				for (let i = 1; i < len; i++) {
				if (val >= Math.pow(10, this.unit[i - 1][0]) && val < Math.pow(10, this.unit[i][0])) res = this.getHandleVal(val, i)
				}
			}
			if (val > Math.pow(10, this.unit[len - 1][0])) res = this.getHandleVal(val, len)
			return res
		},
		getValue (val) {
			let res = 0
			if (this.simplify) {
				const { endVal, unitText } = this.transformValue(val)
				this.unitText = unitText
				res = endVal + '<i class="' + this.unitClass + '">' + unitText + '</i>'
			} else {
				res = val
			}
			return res
		}
	}
}
</script>

方案二：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>数字增长效果</title>
</head>
<body>
 <h1 id="num1"></h1>
 <h1 id="num2"></h1>
 <h1 id="num3"></h1>
  
 <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>
 <script type="text/javascript">
  var options = {
   useEasing: true, // 使用缓和
   useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
   separator: ',', // 分隔器(千位分隔符,默认为',')
   decimal: '.', // 十进制(小数点符号,默认为 '.')
   prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
   suffix: ''  // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) 
  };
   
   // CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
 // 参数一: 数字所在容器
 // 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
 // 参数三: 数字增长后的最终值,该值一般通过异步请求获取
 // 参数四: 数字小数点后保留的位数
 // 参数五: 数字增长特效的时间,此处为3秒
 // 参数六: 其他配置项
 // 注: 参数六也可不加,其配置项则为默认值
 
 new CountUp("num1", 0, 1380, 0, 3, options).start();
 new CountUp("num2", 0, 1380, 2, 3, options).start();
 new CountUp("num3", 0, 1380, 4, 3, options).start();
 </script>
</body>
</html>