封装组件库-趋势标记

    <div class="trend">
        <div class="text">
            //传入插槽，则显示插槽内容
            <slot v-if="slots.default"></slot>
            <div v-else></div>
        </div>
        <div class="icon">
            <qt-icon-arrowup v-if="type == 'up'"/>
            <qt-icon-arrowdown v-else /> 
        </div>
      </div>
    let slots = useSlots()
    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'
        },  
    })

    <el-divider>正常趋势</el-divider>
    <div class="flex">
        <!-- my-trend为全局注册组件-->
        <div class="left"><my-trend text="营业额"></my-trend></div>
        <my-trend text="销售额" type="down"></my-trend>
    </div>
    <br/>

<div class="icon">
    <qt-icon-arrowup v-if="type == 'up'" :style="{color: !reverseColor?upIconColor:'#52c41a'}"/>
    <qt-icon-arrowdown v-else :style="{color: !reverseColor?downIconColor:'#f5222d'}"/>
</div>
let props = defineProps({
    //颜色反转只在默认的颜色下生效，如果使用自定义颜色，这个属性不生效
    reverseColor:{
        type:Boolean,
        default: false
    }
})

<!-- 趋势反转 -->
<el-divider>趋势反转</el-divider>
<div class="flex">
    <div class="left"><my-trend text="营业额" reverseColor></my-trend></div>
    <my-trend text="销售额" type="down" reverseColor></my-trend>
</div>
<br/>

<div class="flex">
    <div class="left"><my-trend text="营业额" upIconColor="pink"></my-trend></div>
    <my-trend text="销售额" type="down" downIconColor="blue"></my-trend>
</div>
<br/>

    <div class="text" :style="{color:textColor}">
        <slot v-if="slots.default"></slot>
        <div v-else></div>
    </div>
    //利用计算属性
    let textColor = computed(()=>{
    return props.type === 'up'?props.upTextColor:props.downTextColor
    })
    let props = defineProps({
        //上升趋势文字颜色
        upTextColor:{
            type:String,
            default:'rgb(0,0,0)'
        },
        //下降趋势文字颜色
        downTextColor:{
            type:String,
            default:'rgb(0,0,0)'
        }
    })

    <el-divider>自定义文字颜色</el-divider>
    <div class="flex">
        <div class="left"><my-trend text="营业额" upTextColor="blue"></my-trend></div>
        <my-trend text="销售额" type="down" downTextColor="#bfa"></my-trend>
    </div>
    <br/>

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

    <el-divider>自定义图标</el-divider>
    <div class="flex">
        <div class="left"><my-trend text="营业额" upIcon="CaretTop"></my-trend></div>
        <my-trend text="销售额" type="down" downIcon="CaretBottom"></my-trend>
    </div>