趋势标记

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

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

(2)views/trend/index.vue

(3)界面效果

trend1.png

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

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

1.通过插槽slot来判断text

 
 
{{text}}

获取插槽内容

let slot = useSlots()

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

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

使用

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

(2)views/trend/index.vue

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.动态绑定文字颜色样式

四、图标自定义

1.定义图标属性

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

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

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

3.views/trend/inde.vue模板调用实现

营业额
        销售额

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

(2)views/trend/index.vue

5.界面效果

trend3.png