z-base-ui

Appearance

ZCount ​

  • 当需要突出某个或某组数字时。
  • 当需要展示统计类数据时使用。
  • 版本要求：version >= 1.1.3

基础用法 ​

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <z-count :num="num"></z-count>

    <div style="margin-top: 30px">
      <z-button @click="num += 1">+</z-button>
      <z-button @click="num -= 1">-</z-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const num = ref(13159.35);
</script>

<style scoped lang="less">

</style>

千分位 ​

使用属性 percentiles 启用千分位。请注意确保num没有携带特殊符号，当然小数点和-是允许的。

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <z-count num="13159.35" percentiles></z-count>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">

</style>

保留小数 ​

添加属性 precision 定义保留几位小数。

默认效果

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

保留3位

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

保留两位，不满足长度时自动补0

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <h3>默认效果</h3>
    <z-count num="13159.352358"></z-count>

    <h3>保留3位</h3>
    <z-count num="13159.352358" :precision="3"></z-count>

    <h3>保留两位，不满足长度时自动补0</h3>
    <z-count num="9563" :precision="2"></z-count>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">

</style>

单位 ​

通过前缀和后缀设置单位

前缀

$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

后缀

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
元

插槽

￥
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
元
<template>
  <div>
    <h3>前缀</h3>
    <z-count prefix="$" num="13159"></z-count>

    <h3>后缀</h3>
    <z-count suffix="元" num="13159"></z-count>

    <h3>插槽</h3>
    <z-count prefix="0" suffix="0" num="9563" :precision="2">
      <template #prefix>
        <div>￥</div>
      </template>
      <template #suffix>元</template>
    </z-count>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">

</style>

组合使用 ​

添加属性 precision 定义保留几位小数。

默认效果

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

保留3位

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9

保留两位，不满足长度时自动补0

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
<template>
  <div>
    <h3>默认效果</h3>
    <z-count num="13159.352358"></z-count>

    <h3>保留3位</h3>
    <z-count num="13159.352358" :precision="3"></z-count>

    <h3>保留两位，不满足长度时自动补0</h3>
    <z-count num="9563" :precision="2"></z-count>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">

</style>

简洁模式 ​

以显示当前分秒为例

2
8
:
0
6
<template>
  <div>
    <z-count class="count" size="30px" :num="num" mode="ordinary"></z-count>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const num = ref("00:00");

const time = () => {
  const now = new Date();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  num.value = `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

  setTimeout(() => {
    time();
  }, 1000);
}

time();
</script>

<style scoped lang="less">
.count {
  color: red;
  font-weight: bold;
}
</style>

注意事项 ​

  • 修改字体大小建议通过size属性修改，其它诸如颜色字重等可通过添加class类名进行修改。
  • 如你不打算使用 size 进行字体大小修改，而是打算全部通过class类名进行修改，请在设置时同时设置height和line-height它们的值与font-size一致。

Count 属性 ​

属性名说明类型默认值
num数值number | string0000
size决定文字大小string24px
percentiles千分位booleanfalse
precision保留几位小数number—
prefix前缀string | v-slot—
suffix后缀string | v-slot—
gap文字间距string4px
mode模式，版本>= 1.2.0ordinary | normalnormal