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>

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

文字颜色

<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>
<script setup lang="ts">
import { KTrend } from "@tomiaa/vue3-components"
</script>

修改图标

<template>
  <div>
    <KTrend up-icon="ElIconCaretTop" />
    <KTrend
      text="减少"
      type="down"
      down-icon="ElIconCaretBottom"
    />
  </div>
</template>
<script setup lang="ts">
import { KTrend } from "@tomiaa/vue3-components"
</script>

插槽

<template>
  <div>
    <KTrend>销售业绩</KTrend>
    <KTrend>
      图标插槽
      <template #upIcon>
        <ElIconCaretTop />
      </template>
    </KTrend>
    <KTrend type="down">
      图标插槽
      <template #downIcon>
        <ElIconCaretBottom />
      </template>
    </KTrend>
  </div>
</template>
<script setup lang="ts">
import { KTrend } from "@tomiaa/vue3-components"
</script>

颜色反转

<template>
  <KTrend reverse-color>销售额</KTrend>
</template>
<script setup lang="ts">
import { KTrend } from "@tomiaa/vue3-components"
</script>

按需引入

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

属性

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

插槽

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

类型声明

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

// TrendProps["属性名"]
// const prop: TrendProps["属性名"] = xxx