138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<!-- 文本组件 -->
|
||
|
|
<el-text
|
||
|
|
:type="type"
|
||
|
|
:size="size"
|
||
|
|
:truncated="truncated"
|
||
|
|
:line-clamp="lineClamp"
|
||
|
|
:tag="tag"
|
||
|
|
: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>
|