关于vue3:会动的数字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
  }
}

主参数

办法

示例 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

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