@tanzhenxing/zx-trend-arrow v1.0.1

TrendArrow 趋势箭头

带有箭头指示的百分比数字，用以展示指标趋势。

引入

import zxTrendArrow from '@/components/zx-trend-arrow/zx-trend-arrow.vue'

基础用法

通过 rate 属性设置数值，大于0时箭头向上，小于0时箭头向下。

<template>
  <zx-trend-arrow :rate="10.2365" />
  <zx-trend-arrow :rate="-0.2535" />
</template>

改变文字颜色

设置 sync-text-color 为 false 可以让文字颜色不跟随箭头颜色变化。

<template>
  <zx-trend-arrow :sync-text-color="false" :rate="1" />
  <zx-trend-arrow :sync-text-color="false" :rate="-0.2535" />
</template>

指定小数位

通过 digits 属性指定小数位数。

<template>
  <zx-trend-arrow :digits="0" :rate="10.2365" />
  <zx-trend-arrow :digits="0" :rate="-0.2535" />
</template>

箭头在前面

设置 arrow-left 属性可以让箭头显示在数字前面。

<template>
  <zx-trend-arrow arrow-left :rate="0.2535" />
  <zx-trend-arrow arrow-left :rate="-0.2535" />
</template>

显示正负号

设置 show-sign 属性可以显示正负号。

<template>
  <zx-trend-arrow show-sign :rate="1" />
  <zx-trend-arrow show-sign :rate="-0.2535" />
</template>

是否展示0

通过 show-zero 属性控制是否显示0值。

<template>
  <zx-trend-arrow show-sign :rate="0" />
  <zx-trend-arrow show-sign show-zero :rate="0" />
</template>

自定义颜色

可以通过 rise-color、drop-color、text-color 属性自定义颜色。

<template>
  <zx-trend-arrow :rate="10.2365" rise-color="rgb(73,143,242)" />
  <zx-trend-arrow :rate="-0.2535" show-sign drop-color="rgb(255, 190, 13)" />
  <zx-trend-arrow
    :sync-text-color="false"
    show-sign
    :rate="-0.2535"
    text-color="rgb(39,197,48)"
    drop-color="rgb(255, 190, 13)"
  />
</template>

自定义图标

通过插槽可以自定义箭头图标。

<template>
  <zx-trend-arrow :rate="10.2365">
    <template #upIcon>
      <zx-icon name="success" custom-color="blue" size="18px" />
    </template>
  </zx-trend-arrow>
  <zx-trend-arrow :rate="-10.2365">
    <template #downIcon>
      <zx-icon name="failure" custom-color="red" />
    </template>
  </zx-trend-arrow>
</template>

API

Props

Events

Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式：

兼容性

• ✅ H5
• ✅ 小程序
• ✅ App

注意事项

1. 组件使用纯 CSS 和 Unicode 字符实现箭头，确保跨平台兼容性
2. 支持自定义图标插槽，可以使用图标组件替换默认箭头
3. 文字颜色可以与箭头颜色同步，也可以独立设置
4. 支持小数位数控制和正负号显示