theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): [tag]新增 maxWidth 属性

Browse Source
This commit is contained in:
sight 2022-08-06 13:26:21 +08:00
parent e9e54bb967
commit 1086547b54
3 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package/component/src/component/tag/index.less
View File

@ -12,7 +12,7 @@
.layui-tag { .layui-tag {
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: center;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
height: @tag-size-md; height: @tag-size-md;
@ -58,11 +58,17 @@
border-radius: 12px; border-radius: 12px;
} }
} }
&-ellipsis {
white-space: nowwrap; &-ellipsis {
text-overflow: ellipsis; .layui-tag-text {
overflow: hidden; display: inline-block;
} white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis
}
}
&-size-lg { &-size-lg {
height: @tag-size-lg; height: @tag-size-lg;

29
package/component/src/component/tag/index.vue
View File

@ -16,12 +16,13 @@ export interface LayTagProps {
bordered?: boolean; bordered?: boolean;
disabled?: boolean; disabled?: boolean;
shape?: "square" | "round"; shape?: "square" | "round";
maxWidth?: number | string;
} }
const props = withDefaults(defineProps<LayTagProps>(), { const props = withDefaults(defineProps<LayTagProps>(), {
color: "#EEE", color: "#EEE",
size: "md", size: "md",
shape: "square" shape: "square",
}); });
const emit = defineEmits(["close"]); const emit = defineEmits(["close"]);
@ -36,7 +37,7 @@ const isCustomColor = computed(
const visible = ref(true); const visible = ref(true);
const handleClose = (e: MouseEvent) => { const handleClose = (e: MouseEvent) => {
if(props.disabled) return; if (props.disabled) return;
//visible.value = false; //visible.value = false;
emit("close", e); emit("close", e);
}; };
@ -49,24 +50,30 @@ const classTag = computed(() => [
[`layui-bg-${props.color}`]: isBuiltInColor, [`layui-bg-${props.color}`]: isBuiltInColor,
"layui-tag-bordered": props.bordered, "layui-tag-bordered": props.bordered,
"layui-tag-disabled": props.disabled, "layui-tag-disabled": props.disabled,
"layui-tag-ellipsis": props.maxWidth,
}, },
]); ]);
const styleTag = computed(() => { const styleTag = computed(() => [
return isCustomColor.value ? { backgroundColor: props.color } : undefined; isCustomColor.value ? { backgroundColor: props.color } : {},
}); {
"max-width": props.maxWidth ?? "unset"
},
]
);
</script> </script>
<template> <template>
<span v-if="visible" :class="classTag" :style="styleTag"> <span v-if="visible" :class="classTag" :style="styleTag">
<span v-if="$slots.icon" class="layui-tag-icon"> <span v-if="$slots.icon" class="layui-tag-icon">
<slot name="icon" /> <slot name="icon" />
</span> </span>
<slot /> <span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
<span <slot />
v-if="closable" </span>
class="layui-tag-close-icon" <slot v-else />
@click.stop="handleClose" <span v-if="closable" class="layui-tag-close-icon" @click.stop="handleClose">
>
<slot name="close-icon"> <slot name="close-icon">
<lay-icon type="layui-icon-close"></lay-icon> <lay-icon type="layui-icon-close"></lay-icon>
</slot> </slot>

2
package/document-component/src/document/zh-CN/components/tag.md
View File

@ -20,6 +20,8 @@
<lay-tag closable>tag</lay-tag> <lay-tag closable>tag</lay-tag>
&nbsp&nbsp &nbsp&nbsp
<lay-tag closable disabled>tag</lay-tag> <lay-tag closable disabled>tag</lay-tag>
&nbsp&nbsp
<lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
</template> </template>
<script> <script>