趋势标记

一、图标的组合使用实现上升下降趋势

(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: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: 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({
    // 标记当前趋势是上升(up)还是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 趋势显示文字
    // 1.父组件传递过来的数据
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 上升趋势图标颜色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 上升趋势图标颜色
    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: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div class="flex">
            <div><m-trend text="营业额"></m-trend></div>
            <div><m-trend text="销售额" type="down"></m-trend></div>
        </div>
        <br>
        <div class="flex">
            <div><m-trend text="营业额" 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

将图标颜色设置成属性，便于后续按照需求改变颜色

二、动态绑定class妙用实现颜色反转。

1.通过插槽slot来判断text

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

获取插槽内容

let slot = useSlots()

2.实现颜色反转，
定义属性

 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: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: 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({
    // 标记当前趋势是上升(up)还是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 趋势显示文字
    // 1.父组件传递过来的数据
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 颜色反转只在默认的颜色下生效， 如果使用了自定义颜色，这个属性就不生效了
    reverseColor:{
        type:Boolean,
        default:false
    },

    // 上升趋势图标颜色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 上升趋势图标颜色
    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="营业额" type="down" reverseColor></m-trend>

trend2.png

三、计算属性的妙用实现文字颜色

1.定义属性

// 上升趋势文字颜色
    upTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    },
    // 下降趋势文字颜色
    downTextColor:{
        type:String,
        default:'rgb(0,0,0)'
    }

2.调用计算属性

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

3.动态绑定文字颜色样式

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

四、图标自定义

1.定义图标属性

// 上升趋势显示的图标
    upIcon:{
        type:String,
        default:'ArrowUp'
    },

    // 下降趋势显示的图标
    downIcon:{
        type:String,
        default:'ArrowDown'
    },

2.使用自定义图标动态显示，使用component动态组件
（toLine方法是之前编写的处理图标的函数，记得引入）

<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模板调用实现

<m-trend upIcon="CaretTop">营业额</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: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: 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'
// 获取插槽内容
let slot = useSlots()
console.log(slot)

let props = defineProps({
    // 标记当前趋势是上升(up)还是下降(down)
    type:{
        type:String,
        default:'up'
    },
    // 上升趋势显示的图标
    upIcon:{
        type:String,
        default:'ArrowUp'
    },

    // 下降趋势显示的图标
    downIcon:{
        type:String,
        default:'ArrowDown'
    },

    // 趋势显示文字
    // 1.父组件传递过来的数据
    // 2,插槽
    text:{
        type:String,
        default:'文字'
    },
    // 颜色反转只在默认的颜色下生效， 如果使用了自定义颜色，这个属性就不生效了
    reverseColor:{
        type:Boolean,
        default:false
    },

    // 上升趋势图标颜色
    upIconColor:{
        type:String,
        default:'#f5222d'
    },
    // 下降趋势图标颜色
    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: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- <div class="flex">
            <div><m-trend text="营业额"></m-trend></div>
            <div><m-trend text="销售额" type="down"></m-trend></div>
        </div>
        <br>
        <div class="flex">
            <div><m-trend text="营业额" 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="营业额" type="down" reverseColor></m-trend>
         -->

         <!-- <m-trend text="营业额" upTextColor="blue"></m-trend>
         <m-trend text="销售额" type="down" downTextColor="yellow"></m-trend> -->
        <m-trend upIcon="CaretTop">营业额</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