company_components_web/src/components/ComText/index.vue

<template>
    <!-- 文本组件 -->
    <el-text
        :tag="tag"
        :type="type"
        :size="size"
        :truncated="truncated"
        :line-clamp="lineClamp"
        :style="computedStyle"
        v-bind="omit(attrs, ['style', 'class'])">
        <slot></slot>
    </el-text>
</template>

<script setup name="ComText">
    import { computed, useAttrs } from "vue";
    import { omit } from "lodash-es";

    // 不继承属性
    defineOptions({
        inheritAttrs: false,
    });

    const attrs = useAttrs();

    // 定义文本属性
    const props = defineProps({
        // 文本类型
        type: {
            type: String,
            default: "",
            validator: (value) => {
                return [
                    "",
                    "primary",
                    "success",
                    "warning",
                    "danger",
                    "info",
                ].includes(value);
            },
        },
        // 文本大小
        size: {
            type: String,
            default: "default",
            validator: (value) => {
                return ["large", "default", "small"].includes(value);
            },
        },
        // 是否显示省略号
        truncated: {
            type: Boolean,
            default: false,
        },
        // 最大行数
        lineClamp: {
            type: [String, Number],
            default: undefined,
        },
        // 自定义元素标签
        tag: {
            type: String,
            default: "span",
        },
        // 自定义样式
        style: {
            type: [Object, String],
            default: () => ({}),
        },
        // 文本颜色（扩展属性）
        color: {
            type: String,
            default: "",
        },
        // 字体粗细（扩展属性）
        fontWeight: {
            type: [String, Number],
            default: "",
        },
        // 文本对齐方式（扩展属性）
        textAlign: {
            type: String,
            default: "",
            validator: (value) => {
                return ["", "left", "center", "right", "justify"].includes(
                    value
                );
            },
        },
        // 文本装饰（扩展属性）
        textDecoration: {
            type: String,
            default: "",
            validator: (value) => {
                return [
                    "",
                    "none",
                    "underline",
                    "overline",
                    "line-through",
                ].includes(value);
            },
        },
    });

    // 计算合并后的样式
    const computedStyle = computed(() => {
        const customStyle = {};

        if (props.color) {
            customStyle.color = props.color;
        }
        if (props.fontWeight) {
            customStyle.fontWeight = props.fontWeight;
        }
        if (props.textAlign) {
            customStyle.textAlign = props.textAlign;
        }
        if (props.textDecoration) {
            customStyle.textDecoration = props.textDecoration;
        }

        // 如果自定义样式为空，直接返回原始样式
        if (Object.keys(customStyle).length === 0) {
            return props.style;
        }

        // 如果原始样式是字符串，使用数组形式合并
        if (typeof props.style === "string") {
            return [props.style, customStyle];
        }

        // 如果原始样式是对象，合并对象
        return { ...props.style, ...customStyle };
    });
</script>