Number 滚动数字

AuNumber 逐位滚动展示数值，支持负数、小数和千分位。数字字号继承外部文字样式。

基础用法

012345678901234567890123456789.01234567890123456789

<script setup>
import { ref } from 'vue';
import { AuButton, AuNumber } from 'aurora-plus';
const value = ref(998.5);
function increase() { value.value = Math.round((value.value + 12.75) * 100) / 100; }
</script>
<template>
  <div class="number-example">
    <div class="number-example__values">
      <AuNumber :value="value" :precision="2" />
    </div>
    <div class="number-example__actions">
      <AuButton size="small" @click="increase">增加数值</AuButton>
      <AuButton size="small" @click="value = 998.5">重置</AuButton>
    </div>
  </div>
</template>
<style scoped>
.number-example { display: grid; width: 100%; gap: 16px; }
.number-example__values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px; font-size: 28px; }
.number-example__actions { display: flex; flex-wrap: wrap; gap: 6px; }
</style>

null、undefined、NaN 和无穷值显示 —。精度限制在 0–20 位；地区设置控制分隔符，数字统一使用 0–9。无效地区设置回退为 en-US。

Number API

Attributes

属性	说明	类型	默认值
value	显示数值	number	null
precision	小数位数	number	0
grouping	启用千分位分组	boolean	true
locale	数字格式地区	string	en-US
animated	启用滚动过渡	boolean	true