文章统计:327字,预计阅读:1分钟。

vue3 组件-上升下降趋势标记

该组件依赖element-plus@element-plus/icons-vue

切组件内默认使用的图标组件名称为el-icon开头,在项目中全局注册element icon时:

import globalIcon from "@element-plus/icons-vue/global"
const app = createApp(App)
globalIcon(app) // 会注册为 el-icon 开头的图标

基础用法

上升
<template>
  <KTrend />
</template>

文字颜色

下降增加减少
<template>
  <div>
    <KTrend
      text="下降"
      type="down"
    />
    <KTrend
      text="增加"
      up-icon-color="blue"
      up-text-color="blue"
    />
    <KTrend
      text="减少"
      type="down"
      down-icon-color="pink"
      down-text-color="pink"
    />
  </div>
</template>

修改图标

上升减少
<template>
  <div>
    <KTrend up-icon="ElIconCaretTop" />
    <KTrend
      text="减少"
      type="down"
      down-icon="ElIconCaretBottom"
    />
  </div>
</template>

插槽

销售业绩 图标插槽 图标插槽
<template>
  <div>
    <KTrend>销售业绩</KTrend>
    <KTrend>
      图标插槽
      <template #upIcon>
        <ElIconCaretTop />
      </template>
    </KTrend>
    <KTrend type="down">
      图标插槽
      <template #downIcon>
        <ElIconCaretBottom />
      </template>
    </KTrend>
  </div>
</template>

颜色反转

销售额
<template>
  <KTrend reverse-color>销售额</KTrend>
</template>

按需引入

<script setup lang="ts">
import { KTrend } from "@tomiaa/vue3-components"
</script>

属性

属性说明类型默认值必填
type图标上下箭头"up" | "down"upfalse
text文字String上升false
upIconColor上升箭头颜色String#f5222dfalse
downIconColor下降箭头颜色String#52c41afalse
reverseColor颜色反转Booleanfalsefalse
upTextColor上升文字颜色String#f5222dfalse
downTextColor下降文字颜色String#52c41afalse
upIcon上升图标组件名StringElIconArrowUpfalse
downIcon下降图标组件名StringElIconArrowDownfalse

插槽

插槽名说明插槽作用域
——文字插槽——
upIcon上升图标插槽——
downIcon下降图标插槽——

类型声明

import type {
  TrendProps, // 属性声明
} from "@tomiaa/vue3-components"

// TrendProps["属性名"]
// const prop: TrendProps["属性名"] = xxx
最后更新时间:
贡献者: tomiaa