web技术学习

Appearance

此页目录
本文总阅读量 次

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

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

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

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

基础用法 ​

vue
<template>
  <KTrend />
</template>

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

文字颜色 ​

vue
<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>

修改图标 ​

vue
<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>

插槽 ​

vue
<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>

颜色反转 ​

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

按需引入 ​

vue
<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下降图标插槽——

类型声明 ​

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

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

评论

交流群