滚动数字

通用组件

滚动数字
自定义滚动条
虚拟滚动-定高
虚拟滚动-不定高
色块图
色块图-虚拟滚动
进度条
宽度拖拽
折叠过度
省略tooltip

业务组件

虚拟滚动milestone表格
粒子button

未完善组件

tabbar

1. 基础用法

0123456789

<template>
  <DynamicNumber v-model="count"/>
</template>

<script>
import DynamicNumber from "@/packages/dynamic-number";
export default {
  name: "dynamic-number",
  props: {},
  data() {
    return {
      count: 0,
    };
  },
  components: {
    DynamicNumber,
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    let timer = setInterval(() => {
      this.count += 123;
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  beforeDestroy() {},
};
</script>

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

显示代码

2. 指定数字最大显示长度

0123456789

<template>
  <DynamicNumber v-model="count" :length="2"/>
</template>

<script>
import DynamicNumber from "@/packages/dynamic-number";
export default {
  name: "dynamic-number",
  props: {},
  data() {
    return {
      count: 0,
    };
  },
  components: {
    DynamicNumber,
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    let timer = setInterval(() => {
      this.count += 12;
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  beforeDestroy() {},
};
</script>

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

显示代码

3. 使用千分分割

0123456789

<template>
  <DynamicNumber v-model="count" :isThousandSplit="true"/>
</template>

<script>
import DynamicNumber from "@/packages/dynamic-number";
export default {
  name: "dynamic-number",
  props: {},
  data() {
    return {
      count: 0,
    };
  },
  components: {
    DynamicNumber,
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    let timer = setInterval(() => {
      this.count += 123;
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  beforeDestroy() {},
};
</script>

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

显示代码

API

属性	说明	类型	默认值
v-modal	绑定值	Number	0
length	最大显示长度	Number	9
isThousandSplit	是否使用千分分割	Boolean	false