【Vue3+Vite+TS】6.0 组件四：趋势标记

必备UI组件

图标选择器将用到的组件：
无

组件设计

新建src\components\baseline\trend\src\index.vue

<template>
    <div>
        <div class="bs-wrapper">
            <div class="text">{{ text }}</div>
            <div class="icon">
                <el-icon-arrowup
                    :style="{ color: upIconColor }"
                    v-if="type === 'up'"
                ></el-icon-arrowup>
                <el-icon-arrowdown
                    :style="{ color: downIconColor }"
                    v-else
                ></el-icon-arrowdown>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    //说明：标记当前趋势：上升(up)下降(down)
    type: {
        type: String,
        default: 'up',
    },
    //说明：趋势显示的文字
    //父组件传递过来的值或者插槽
    text: {
        type: String,
        default: '',
    },
    upIconColor: {
        type: String,
        default: '#f5222d',
    },
    downIconColor: {
        type: String,
        default: '#52c41a',
    },
})
</script>
<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
    align-items: center;
    .text {
        font-size: 0.12rem;
        margin-right: 0.04rem;
    }

    .icon {
        svg {
            width: 0.2rem;
            height: 0.2rem;
        }
    }
}
</style>

新建src\components\baseline\trend\index.ts


import { App } from 'vue'
import Trend from './src/index.vue'

export { Trend }

//组件可通过use的形式使用
export default {
    Trend,
    install(app: App) {
        app.component('bs-trend', Trend)
    },
}

修改src\components\baseline\index.ts

import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'

const components = [ChooseArea, ChooseIcon, Container, Trend]
export { ChooseArea, ChooseIcon, Container, Trend }

//组件可通过use的形式使用
export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
}

新建src\views\trend\index.vue

<template>
    <div class="bs-wrapper">
        <div class="flex">
            <div><bs-trend text="营业额"></bs-trend></div>
            <div><bs-trend text="营业额" type="down"></bs-trend></div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend text="营业额" up-icon-color="#52c41a"></bs-trend>
            </div>
            <div>
                <bs-trend
                    text="营业额"
                    down-icon-color="#f5222d"
                    type="down"
                ></bs-trend>
            </div>
        </div>
        <br />
        <div class="flex">
            <div><bs-trend text="营业额"></bs-trend></div>
            <div><bs-trend text="营业额" type="down"></bs-trend></div>
        </div>
        <br />
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
    .flex {
        display: flex;
    }
    div {
        margin-right: 0.1rem;
    }
}
</style>

效果如下：

image.png

将组件改写为插槽用法

颜色翻转

修改src\components\baseline\trend\src\index.vue

<template>
    <div>
        <div class="bs-wrapper">
            <div class="text">
                <slot v-if="slots.default"></slot>
                <div v-else>{{ text }}</div>
            </div>
            <div class="icon">
                <el-icon-arrowup
                    :style="{
                        color: !reverseColor
                            ? upIconColor
                            : DOWN_ICON_COLOR_DEFAULT,
                    }"
                    v-if="type === 'up'"
                ></el-icon-arrowup>
                <el-icon-arrowdown
                    :style="{
                        color: !reverseColor
                            ? downIconColor
                            : UP_ICON_COLOR_DEFAULT,
                    }"
                    v-else
                ></el-icon-arrowdown>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue'
const UP_ICON_COLOR_DEFAULT = '#f5222d'
const DOWN_ICON_COLOR_DEFAULT = '#52c41a'
const props = defineProps({
    //说明：标记当前趋势：上升(up)下降(down)
    type: {
        type: String,
        default: 'up',
    },
    //说明：趋势显示的文字
    //父组件传递过来的值或者插槽
    text: {
        type: String,
        default: '',
    },
    upIconColor: {
        type: String,
        default: '#f5222d',
    },
    downIconColor: {
        type: String,
        default: '#52c41a',
    },
    //颜色翻转只在默认的颜色下生效
    reverseColor: {
        type: Boolean,
        default: false,
    },
})
let slots = useSlots()
console.log(slots)
</script>
<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
    align-items: center;
    .text {
        font-size: 0.12rem;
        margin-right: 0.04rem;
    }

    .icon {
        svg {
            width: 0.2rem;
            height: 0.2rem;
        }
    }
}
</style>

修改src\views\trend\index.vue

<template>
    <div class="bs-wrapper">
        <div class="flex">
            <div><bs-trend text="营业额"></bs-trend></div>
            <div><bs-trend text="营业额" type="down"></bs-trend></div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend text="营业额" up-icon-color="#52c41a"></bs-trend>
            </div>
            <div>
                <bs-trend
                    text="营业额"
                    down-icon-color="#f5222d"
                    type="down"
                ></bs-trend>
            </div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend text="营业额" :reverse-color="true"></bs-trend>
            </div>
            <div>
                <bs-trend
                    text="营业额"
                    type="down"
                    :reverse-color="true"
                ></bs-trend>
            </div>
        </div>
        <br />
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
    .flex {
        display: flex;
    }
    div {
        margin-right: 0.1rem;
    }
}
</style>

image.png

自定义文字颜色

<!--
 * @Author: your name
 * @Date: 2021-12-23 00:07:25
 * @LastEditTime: 2021-12-24 18:32:39
 * @LastEditors: Please set LastEditors
 * @Description: 基础组件：趋势标记
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\trend\src\index.vue
-->

<template>
    <div>
        <div class="bs-wrapper">
            <div class="text" :style="{ color: textColor }">
                <slot v-if="slots.default"></slot>
                <div v-else>{{ text }}</div>
            </div>
            <div class="icon">
                <el-icon-arrowup
                    :style="{
                        color: !reverseColor
                            ? upIconColor
                            : DOWN_ICON_COLOR_DEFAULT,
                    }"
                    v-if="type === 'up'"
                ></el-icon-arrowup>
                <el-icon-arrowdown
                    :style="{
                        color: !reverseColor
                            ? downIconColor
                            : UP_ICON_COLOR_DEFAULT,
                    }"
                    v-else
                ></el-icon-arrowdown>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue'
const UP_ICON_COLOR_DEFAULT = '#f5222d'
const DOWN_ICON_COLOR_DEFAULT = '#52c41a'
const props = defineProps({
    //说明：标记当前趋势：上升(up)下降(down)
    type: {
        type: String,
        default: 'up',
    },
    //说明：趋势显示的文字
    //父组件传递过来的值或者插槽
    text: {
        type: String,
        default: '',
    },
    upIconColor: {
        type: String,
        default: '#f5222d',
    },
    downIconColor: {
        type: String,
        default: '#52c41a',
    },
    textColor: {
        type: String,
        default: '',
    },
    //颜色翻转只在默认的颜色下生效
    reverseColor: {
        type: Boolean,
        default: false,
    },
})
let slots = useSlots()
console.log(slots)
</script>
<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
    align-items: center;
    .text {
        font-size: 0.12rem;
        margin-right: 0.04rem;
    }

    .icon {
        svg {
            width: 0.2rem;
            height: 0.2rem;
        }
    }
}
</style>

自定义图标

修改src\components\baseline\trend\src\index.vue

<!--
 * @Author: your name
 * @Date: 2021-12-23 00:07:25
 * @LastEditTime: 2021-12-24 22:58:58
 * @LastEditors: Please set LastEditors
 * @Description: 基础组件：趋势标记
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\trend\src\index.vue
-->

<template>
    <div>
        <div class="bs-wrapper">
            <div class="text" :style="{ color: textColor }">
                <slot v-if="slots.default"></slot>
                <div v-else>{{ text }}</div>
            </div>
            <div class="icon">
                <component
                    :is="currentIcon"
                    :style="{
                        color: !reverseColor
                            ? upIconColor
                            : DOWN_ICON_COLOR_DEFAULT,
                    }"
                    v-if="type === 'up'"
                ></component>
                <component
                    :is="currentIcon"
                    :style="{
                        color: !reverseColor
                            ? downIconColor
                            : UP_ICON_COLOR_DEFAULT,
                    }"
                    v-else
                ></component>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
/**
 * 枚举类型限制type的值
 */
export enum EnumTrend {
    UP = 'up',
    DOWN = 'down',
}
</script>

<script lang="ts" setup>
import { ref, useSlots, watchEffect, PropType } from 'vue'
const UP_ICON_COLOR_DEFAULT = '#f5222d' //绿色
const DOWN_ICON_COLOR_DEFAULT = '#52c41a' //红色

const props = defineProps({
    //说明：标记当前趋势：上升(up)下降(down)
    type: {
        type: String as PropType<EnumTrend.UP | EnumTrend.DOWN>,
        default: EnumTrend.UP,
        validator(value: any) {
            return [EnumTrend.UP, EnumTrend.DOWN].includes(value)
        },
    },
    //说明：趋势显示的文字
    //父组件传递过来的值或者插槽
    text: {
        type: String,
        default: '',
    },
    icon: {
        type: String,
    },
    upIconColor: {
        type: String,
        default: '#f5222d',
    },
    downIconColor: {
        type: String,
        default: '#52c41a',
    },
    /**
     * 文字颜色
     */
    textColor: {
        type: String,
        default: '',
    },
    //颜色翻转只在默认的颜色下生效
    reverseColor: {
        type: Boolean,
        default: false,
    },
})

let slots = useSlots()

console.log(slots)

let currentIcon = ref<string>('')

/**
 * 自定义图标
 * watchEffect：会执行第一次
 */
watchEffect(() => {
    if (props.icon == null && props.icon != '') {
        if (props.type === 'up') {
            currentIcon.value = 'el-icon-arrowup'
        } else {
            currentIcon.value = 'el-icon-arrowdown'
        }
    } else {
        currentIcon.value = props.icon
    }
})
</script>
<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
    align-items: center;
    .text {
        font-size: 0.12rem;
        margin-right: 0.04rem;
    }

    .icon {
        svg {
            width: 0.2rem;
            height: 0.2rem;
        }
    }
}
</style>

这里用到ts的枚举、断言等语法，看客朋友们如果不太理解，请自行百度学习。

image.png

修改src\views\trend\index.vue

<!--
 * @Author: your name
 * @Date: 2021-12-23 00:07:25
 * @LastEditTime: 2021-12-24 23:20:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\trend\src\index.vue
-->
<template>
    <div class="bs-wrapper">
        <div class="flex">
            <div><bs-trend text="营业额"></bs-trend></div>
            <div><bs-trend text="营业额" type="down"></bs-trend></div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend
                    text="自定义颜色上升"
                    up-icon-color="#52c41a"
                ></bs-trend>
            </div>
            <div>
                <bs-trend
                    text="自定义颜色下降"
                    down-icon-color="#f5222d"
                    type="down"
                ></bs-trend>
            </div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend
                    text="翻转颜色上升"
                    text-color="#52c41a"
                    :reverse-color="true"
                ></bs-trend>
            </div>
            <div>
                <bs-trend
                    text="翻转颜色下降"
                    type="down"
                    text-color="#f5222d"
                    :reverse-color="true"
                ></bs-trend>
            </div>
        </div>
        <br />
        <div class="flex">
            <div>
                <bs-trend
                    text-color="#52c41a"
                    icon="el-icon-carettop"
                    :reverse-color="true"
                >
                    自定义图标上升
                </bs-trend>
            </div>
            <div>
                <bs-trend
                    type="down"
                    icon="el-icon-caretbottom"
                    text-color="#f5222d"
                    :reverWse-color="true"
                >
                    自定义图标下降
                </bs-trend>
            </div>
        </div>
        <br />
    </div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.bs-wrapper {
    .flex {
        display: flex;
    }
    div {
        margin-right: 0.1rem;
    }
}
</style>

image.png

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,128评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,316评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,737评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,283评论 1赞 287
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,384评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,458评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,467评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,251评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,688评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,980评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,155评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,818评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,492评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,142评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,382评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,020评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,044评论 2赞 352

【Vue3+Vite+TS】6.0 组件四：趋势标记

必备UI组件

组件设计

颜色翻转

自定义文字颜色

自定义图标

推荐阅读更多精彩内容