一、圖標(biāo)的組合使用實(shí)現(xiàn)上升下降趨勢

(1)component/trend/src/index.vue

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-09 20:11:37
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-10 10:02:45
 * @FilePath: \mm-components\src\components\trend\src\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請?jiān)O(shè)置`customMade`, 打開koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="trend">
        <div class="text">
            {{text}}
        </div>
        <div class="icon">
            <el-icon-arrowup :style="{color:upIconColor}" v-if="type === 'up'" />
            <el-icon-arrowdown :style="{color:downIconColor}"  v-else />
        </div>
    </div>
</template>

<script lang="ts" setup>
let props = defineProps({
    // 標(biāo)記當(dāng)前趨勢是上升(up)還是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 趨勢顯示文字
    // 1.父組件傳遞過來的數(shù)據(jù)
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 上升趨勢圖標(biāo)顏色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 上升趨勢圖標(biāo)顏色
    downIconColor:{
        type:String,
        default:'#52c41a'
    }
})
</script>

<style lang="scss" scoped>
.trend{
    display: flex;
    align-items: center;
}
.text{
    font-size: 12px;
    margin-right: 4px;
}
.icon{
    height: 0.8em;
    width: 0.8em;
}
</style>

(2)views/trend/index.vue

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-09 20:27:32
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-10 10:08:40
 * @FilePath: \mm-components\src\views\trend\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請?jiān)O(shè)置`customMade`, 打開koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div class="flex">
            <div><m-trend text="營業(yè)額"></m-trend></div>
            <div><m-trend text="銷售額" type="down"></m-trend></div>
        </div>
        <br>
        <div class="flex">
            <div><m-trend text="營業(yè)額" upIconColor="red"></m-trend></div>
            <div><m-trend text="銷售額" type="down" downIconColor="#5dcc92"></m-trend></div>
        </div>
        
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.flex{
    display: flex;
    div{
        margin-right: 10px;
    }
}
</style>

(3)界面效果

trend1.png

將圖標(biāo)顏色設(shè)置成屬性，便于后續(xù)按照需求改變顏色

二嚎朽、動(dòng)態(tài)綁定class妙用實(shí)現(xiàn)顏色反轉(zhuǎn)耿导。

1.通過插槽slot來判斷text

 <slot v-if="slot.default"></slot>
 <div v-else>{{text}}</div>

獲取插槽內(nèi)容

let slot = useSlots()

2.實(shí)現(xiàn)顏色反轉(zhuǎn)富拗，
定義屬性

 reverseColor:{
        type:Boolean,
        default:false
    },

使用

<div class="icon">
            <el-icon-arrowup :style="{color: !reverseColor ? upIconColor:'#52c41a'}" v-if="type === 'up'" />
            <el-icon-arrowdown :style="{color: !reverseColor ? downIconColor:'#f5222d'}"  v-else />
</div>

(1)component/trend/src/index.vue

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-09 20:11:37
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-10 11:25:30
 * @FilePath: \mm-components\src\components\trend\src\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請?jiān)O(shè)置`customMade`, 打開koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="trend">
        <div class="text">
            
            <slot v-if="slot.default"></slot>
            <div v-else>{{text}}</div>
        </div>
        <div class="icon">
            <el-icon-arrowup :style="{color: !reverseColor ? upIconColor:'#52c41a'}" v-if="type === 'up'" />
            <el-icon-arrowdown :style="{color: !reverseColor ? downIconColor:'#f5222d'}"  v-else />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, useSlots } from "@vue/runtime-core"


let slot = useSlots()
console.log(slot)

let props = defineProps({
    // 標(biāo)記當(dāng)前趨勢是上升(up)還是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 趨勢顯示文字
    // 1.父組件傳遞過來的數(shù)據(jù)
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 顏色反轉(zhuǎn)只在默認(rèn)的顏色下生效粟矿， 如果使用了自定義顏色磕道，這個(gè)屬性就不生效了
    reverseColor:{
        type:Boolean,
        default:false
    },

    // 上升趨勢圖標(biāo)顏色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 上升趨勢圖標(biāo)顏色
    downIconColor:{
        type:String,
        default:'#52c41a'
    }
})

</script>

<style lang="scss" scoped>
.trend{
    display: flex;
    align-items: center;
}
.text{
    font-size: 12px;
    margin-right: 4px;
}
.icon{
    svg{
        height: 0.8em;
        width: 0.8em;
    }
    
}
</style>

(2)views/trend/index.vue

<m-trend text="銷售額" reverseColor></m-trend>
<m-trend text="營業(yè)額" type="down" reverseColor></m-trend>

trend2.png

三、計(jì)算屬性的妙用實(shí)現(xiàn)文字顏色

1.定義屬性

// 上升趨勢文字顏色
    upTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    },
    // 下降趨勢文字顏色
    downTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    }

2.調(diào)用計(jì)算屬性

// 文字顏色
let textColor = computed(()=>{
    return props.type === 'up' ? props.upTextColor : props.downTextColor
})

3.動(dòng)態(tài)綁定文字顏色樣式

<el-icon-arrowup :style="{color: !reverseColor ? upIconColor:'#52c41a'}" v-if="type === 'up'" />
<el-icon-arrowdown :style="{color: !reverseColor ? downIconColor:'#f5222d'}"  v-else />

四讳侨、圖標(biāo)自定義

1.定義圖標(biāo)屬性

// 上升趨勢顯示的圖標(biāo)
    upIcon:{
        type:String,
        default:'ArrowUp'
    },

    // 下降趨勢顯示的圖標(biāo)
    downIcon:{
        type:String,
        default:'ArrowDown'
    },

2.使用自定義圖標(biāo)動(dòng)態(tài)顯示呵萨，使用component動(dòng)態(tài)組件
（toLine方法是之前編寫的處理圖標(biāo)的函數(shù)，記得引入）

<component 
  :is="`el-icon-${toLine(upIcon)}`"
  :style="{color: !reverseColor ? upIconColor:'#52c41a'}" 
   v-if="type === 'up'"
>
  </component>
 <component 
    :is="`el-icon-${toLine(downIcon)}`"
    :style="{color: !reverseColor ? downIconColor:'#f5222d'}" 
    v-else
>
</component>

3.views/trend/inde.vue模板調(diào)用實(shí)現(xiàn)

<m-trend upIcon="CaretTop">營業(yè)額</m-trend>
        <m-trend type="down" downIcon="CaretBottom">銷售額</m-trend>

4.完整代碼
(1)component/trend/src/index.vue

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-09 20:11:37
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-10 11:58:58
 * @FilePath: \mm-components\src\components\trend\src\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請?jiān)O(shè)置`customMade`, 打開koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="trend">
        <div class="text" :style="{color:textColor}">
            
            <slot v-if="slot.default"></slot>
            <div v-else>{{text}}</div>
        </div>
        <div class="icon">
            <!-- <el-icon-arrowup :style="{color: !reverseColor ? upIconColor:'#52c41a'}" v-if="type === 'up'" />
            <el-icon-arrowdown :style="{color: !reverseColor ? downIconColor:'#f5222d'}"  v-else /> -->
            <component 
                :is="`el-icon-${toLine(upIcon)}`"
                :style="{color: !reverseColor ? upIconColor:'#52c41a'}" 
                v-if="type === 'up'"
            >
            </component>
            <component 
                :is="`el-icon-${toLine(downIcon)}`"
                :style="{color: !reverseColor ? downIconColor:'#f5222d'}" 
                v-else
            >
            </component>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, useSlots } from "@vue/runtime-core"
import {toLine} from '../../../utils/index'
// 獲取插槽內(nèi)容
let slot = useSlots()
console.log(slot)

let props = defineProps({
    // 標(biāo)記當(dāng)前趨勢是上升(up)還是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 上升趨勢顯示的圖標(biāo)
    upIcon:{
        type:String,
        default:'ArrowUp'
    },

    // 下降趨勢顯示的圖標(biāo)
    downIcon:{
        type:String,
        default:'ArrowDown'
    },

    // 趨勢顯示文字
    // 1.父組件傳遞過來的數(shù)據(jù)
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 顏色反轉(zhuǎn)只在默認(rèn)的顏色下生效爷耀， 如果使用了自定義顏色甘桑，這個(gè)屬性就不生效了
    reverseColor:{
        type:Boolean,
        default:false
    },

    // 上升趨勢圖標(biāo)顏色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 下降趨勢圖標(biāo)顏色
    downIconColor:{
        type:String,
        default:'#52c41a'
    },

    // 上升趨勢文字顏色
    upTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    },
    // 下降趨勢文字顏色
    downTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    }
})

// 文字顏色
let textColor = computed(()=>{
    return props.type === 'up' ? props.upTextColor : props.downTextColor
})
</script>

<style lang="scss" scoped>
.trend{
    display: flex;
    align-items: center;
}
.text{
    font-size: 12px;
    margin-right: 4px;
}
.icon{
    svg{
        height: 0.8em;
        width: 0.8em;
    }
    
}
</style>

(2)views/trend/index.vue

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-09 20:27:32
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-10 11:57:45
 * @FilePath: \mm-components\src\views\trend\index.vue
 * @Description: 這是默認(rèn)設(shè)置,請?jiān)O(shè)置`customMade`, 打開koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- <div class="flex">
            <div><m-trend text="營業(yè)額"></m-trend></div>
            <div><m-trend text="銷售額" type="down"></m-trend></div>
        </div>
        <br>
        <div class="flex">
            <div><m-trend text="營業(yè)額" upIconColor="red"></m-trend></div>
            <div><m-trend text="銷售額" type="down" downIconColor="#5dcc92"></m-trend></div>
        </div> -->

        <!-- <m-trend text="銷售額" reverseColor></m-trend>
        <m-trend text="營業(yè)額" type="down" reverseColor></m-trend>
         -->

         <!-- <m-trend text="營業(yè)額" upTextColor="blue"></m-trend>
         <m-trend text="銷售額" type="down" downTextColor="yellow"></m-trend> -->
        <m-trend upIcon="CaretTop">營業(yè)額</m-trend>
        <m-trend type="down" downIcon="CaretBottom">銷售額</m-trend>
    </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.flex{
    display: flex;
    div{
        margin-right: 10px;
    }
}
</style>

5.界面效果

trend3.png