趋势图标

架构

├── src
│   ├── components
│   │   ├── chooseTrend
│   │   │      ├── lib (引入的第三方库)
│   │   │      │    └── xxx.json
│   │   │      ├── src (源码)
│   │   │      │   ├── index.vue
│   │   │      ├── index.ts

index.ts

import { type App } from 'vue'
import chooseTrend from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
    install(app: App) {
        app.component('YJ-choose-trend', chooseTrend)
    }
}

interface/chooseTrend/type.ts

• fontSize 我这里设置了可有可无

export interface ChooseTrendProps {
    // 标记当前的趋势是上升(up)还是下降(down) 默认值应该up
    type: string
    // 趋势显示文字 1.父组件传递过来的数据 2.插槽
    text: string
    textColor: string
    iconColor: string
    fontSize?: string
    iconWidth?: string
    iconHeight?: string
}

components/chooseTrend/src/index.vue

<template>
    <div class="trend">
        <div class="text" ref="trendText">
            {{ data.text }}
        </div>
        <div class="icon">
            <el-icon-arrow-up
                v-if="data.type === 'up'"
                :style="{ width: data.iconWidth, height: data.iconHeight, color: data.iconColor }"
            ></el-icon-arrow-up>
            <el-icon-arrow-down
                v-else
                :style="{ width: data.iconWidth, height: data.iconHeight, color: data.iconColor }"
            ></el-icon-arrow-down>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref, withDefaults } from 'vue'
    import { type ChooseTrendProps } from '@/interfaces/chooseTrend/type'
    const trendText = ref<HTMLElement | null>(null)
    const trendIcon = ref<HTMLElement | null>(null)
    const props = withDefaults(
        defineProps<{
            data: ChooseTrendProps
        }>(),
        {
            data: () => ({
                text: '下降',
                type: 'down',
                textColor: '#67C23A',
                fontSize: '15px',
                iconColor: '#67C23A',
                iconWidth: '14px',
                iconHeight: '14px'
            })
             
        }
    )

    onMounted(() => {
        if (trendText.value) {
            trendText.value.style.color = props.data.textColor || '#67C23A'
            trendText.value.style.fontSize = props.data.fontSize || '15px'
        }
    })
</script>

<style scoped lang="scss">
    .trend {
        .text {
            margin-right: 8px;
            font-size: 15px;
            float: left;
        }
        .icon {
            width: 16px;
            height: 16px;
            float: left;
        }
    }
</style>

使用

• pages/chooseTrend/index.vue

<template>
    <div>
        <YJ-choose-trend :data="data"></YJ-choose-trend>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { type ChooseTrendProps } from '@/interfaces/chooseTrend/type'
    const data = ref<ChooseTrendProps>({
        text: '上升',
        type: 'up',
        textColor: '#00c853',
        iconColor: '#3F85FF',
        fontSize: '24px',
        iconWidth: '24px',
        iconHeight: '24px'
    })
</script>

<style scoped></style>