一、图标的组合使用实现上升下降趋势
(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
