🌀(component): tag-input 样式, tag-width 超出 input 宽度时自动省略文本

This commit is contained in:
就眠儀式 2022-11-15 23:57:11 +08:00
parent 11eada1d9d
commit c1325055fb
3 changed files with 19 additions and 5 deletions

View File

@ -55,7 +55,7 @@ const classTag = computed(() => [
const styleTag = computed(() => [ const styleTag = computed(() => [
{ {
"max-width": props.maxWidth ?? "unset", "max-width": props.maxWidth ?? "100%",
...useTagCustomStyle(props).value, ...useTagCustomStyle(props).value,
}, },
]); ]);
@ -105,10 +105,12 @@ function useTagCustomStyle(props: TagProps) {
<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>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">
<span v-if="maxWidth" :style="styleTag" class="layui-tag-text"> <span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
<slot /> <slot />
</span> </span>
<slot v-else /> <slot v-else />
</span>
<span <span
v-if="closable" v-if="closable"
class="layui-tag-close-icon" class="layui-tag-close-icon"

View File

@ -86,7 +86,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
width: fit-content; width: 100%;
height: auto; height: auto;
overflow: hidden; overflow: hidden;

View File

@ -11,6 +11,18 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="1.7.x"> <lay-timeline-item title="1.7.x">
<ul>
<a name="1-7-8"></a>
<li>
<h3>1.7.8 <span class="layui-badge-rim">2022-11-15</span></h3>
<ul>
<li>[修复] backtop 组件部分浏览器版本无法正常返回顶部。</li>
<li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li>
<li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li>
<li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li>
</ul>
</li>
</ul>
<ul> <ul>
<a name="1-7-7"></a> <a name="1-7-7"></a>
<li> <li>