会动的数字，vue3 插件，动态数字。驾驶舱（大屏）的最爱。

简介

会动的数字。

快速开始

npm i moving-numbers-vue3 -S

快速应用

全局注入

import movingNumbers from 'moving-numbers-vue3'
app.use(movingNumbers);

局部注入

import { MovingNumbers } from 'moving-numbers-vue3';
export default {
  name: 'App',
  components: {
    MovingNumbers
  }
}

主参数

参数	类型	必填项	默认值	参考值	说明
mNum	Number 或 String	√			会动的数字。
mode	String	×	fast	fast：快增；fix：定变；scroll：滚动；	计算模式。
decimal	Number	×			小数位限制，默认不做处理。设定后处理原则：数据小数位位数大于指定数字处理。
quantileShow	Boolean	×	false		分位符号是否显示。
quantileType	Number	×	4		分位符号类型：人民币：4位分割；美元：3位分割。

方法

参数	类型	解释

示例 1

<MovingNumbers
  class="c1"
  :mNum="movingNumber"
  :quantileShow="true">
</MovingNumbers>

setInterval(() => {
  this.movingNumber = (Math.random() * 1000000).toFixed(6);
  // console.log(this.movingNumber);
}, 5000);
</script>

示例 2

<MovingNumbers
  class="c2"
  :mNum="movingNumber"
  mode="fix"
  :decimal="3"
  :quantileShow="true"
  :quantileType="3">
</MovingNumbers>

setInterval(() => {
  this.movingNumber = (Math.random() * 1000000).toFixed(6);
  // console.log(this.movingNumber);
}, 5000);
</script>

示例 3

<MovingNumbers
  class="c3"
  :mNum="movingNumber"
  mode="scroll"
  :decimal="4"
  :quantileShow="true">
</MovingNumbers>

setInterval(() => {
  this.movingNumber = (Math.random() * 1000000).toFixed(6);
  // console.log(this.movingNumber);
}, 5000);
</script>

上地址（npm地址）

NPM

客官品着\~\~\~\~