MTP20_WEB_GLOBAL/src/components/base/iconfont/index.vue

<template>
    <div ref="iconfontRef" :class="['app-iconfont', active && 'is-active']">
        <span :class="iconClass" :style="iconStyles"></span>
        <span class="app-iconfont__label" v-if="label || $slots.default">
            <slot>{{ label }}</slot>
        </span>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, computed, PropType, onMounted } from 'vue'

const props = defineProps({
    icon: {
        type: String,
        required: true
    },
    color: String,
    size: String,
    active: Boolean,
    activeIcon: String,
    activeColor: String,
    label: String,
    // 标签方向
    labelDirection: {
        type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
        default: 'right',
    },
})

const iconfontRef = shallowRef<HTMLDivElement>()

const iconClass = computed(() => {
    const classList = ['g-icon']
    if (props.active) {
        classList.push(props.activeIcon ?? props.icon)
    } else {
        classList.push(props.icon)
    }
    return classList
})

const iconStyles = computed(() => ({
    fontSize: props.size,
    color: props.activeColor ?? props.color
}))

onMounted(() => {
    const el = iconfontRef.value
    if (el) {
        switch (props.labelDirection) {
            case 'left': {
                el.style.setProperty('flex-direction', 'row-reverse')
                break
            }
            case 'top': {
                el.style.setProperty('flex-direction', 'column-reverse')
                break
            }
            case 'bottom': {
                el.style.setProperty('flex-direction', 'column')
                break
            }
        }
    }
})
</script>

<style lang="less">
@import './index.less';
</style>