Trend 变化幅度

AuTrend 使用方向标记和语义色展示上升、下降、持平或新增状态。

基础用法

+12.5%−8.2%±0.0%新增−5.6%—

<script setup>
import { AuTrend } from 'aurora-plus';
</script>
<template>
  <div class="trend-example">
    <AuTrend :value="12.5" label="上升 12.5%" />
    <AuTrend :value="-8.2" />
    <AuTrend :value="0" />
    <AuTrend fresh />
    <AuTrend :value="-5.6" reverse label="下降为正向变化" />
    <AuTrend :value="null" />
  </div>
</template>
<style scoped>
.trend-example { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

fresh 用于无法与上一值比较的新增状态，显示「新增」。无有效数值时显示 —；reverse 只反转颜色含义，保留数值正负与方向。

Trend API

Attributes

属性	说明	类型	默认值
value	变化幅度	number	null
precision	小数位数，限制在 0–20	number	1
suffix	数值后缀	string	%
fresh	显示新增状态	boolean	false
reverse	下降为正向，上升为负向	boolean	false
label	悬停说明	string	''