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

✨(component): 调整 tag 样式, 简化文档 demo

Browse Source
This commit is contained in:
就眠儀式 2022-09-22 19:01:13 +08:00
parent 1b094d3a04
commit 8b6f727950
2 changed files with 45 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
@tagSizes: lg, md, sm, xs; @tagSizes: lg, md, sm, xs;
@tag-size-default: 28px; @tag-size-default: 26px;
@tag-size-default-font-size: 14px; @tag-size-default-font-size: 14px;
@tag-size-lg: @tag-size-default + 4px; @tag-size-lg: @tag-size-default + 4px;
@tag-size-md: @tag-size-default; @tag-size-md: @tag-size-default;
@ -20,8 +20,8 @@
@tag-border-width: 1px; @tag-border-width: 1px;
.layui-tag { .layui-tag {
--layui-tag-bg-color: #FFF; --layui-tag-bg-color: #fafafa;
--layui-tag-border-color: var(--global-neutral-color-5); --layui-tag-border-color: #f0f0f0;
--layui-tag-hover-color: #FFF; --layui-tag-hover-color: #FFF;
--layui-tag-text-color: currentColor; --layui-tag-text-color: currentColor;
display: inline-flex; display: inline-flex;
@ -81,7 +81,6 @@
text-overflow: ellipsis text-overflow: ellipsis
} }
& &-close-icon { & &-close-icon {
margin-left: 4px; margin-left: 4px;
font-size: @tag-size-default-font-size; font-size: @tag-size-default-font-size;

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

@ -4,72 +4,58 @@
::: title 基本介绍 ::: title 基本介绍
::: :::
::: describe 标签组件 ::: describe 进行标记和分类的小标签, 用于标记事物的属性与纬度。
::: :::
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 标签的基本用法 ::: demo 使用 `lay-tag` 标签, 创建标签组件。
<template> <template>
<lay-space size="md"> <lay-space size="md">
<lay-tag>标签</lay-tag> <lay-tag>标签</lay-tag>
<lay-tag closable>标签</lay-tag> <lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
<lay-tag closable disabled>标签</lay-tag> </lay-space>
<lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
</lay-space>
</template> </template>
<script> <script setup>
const TAG_TYPES = [
"primary",
"normal",
"warm",
"danger",
];
</script> </script>
::: :::
::: title 标签尺寸 ::: title 图标插槽
::: :::
::: demo 通过 size 属性控制标签尺寸 ::: demo 通过 icon 插槽自定义 tag 前置图标。
<template> <template>
<lay-space direction="vertical" size="md">
<lay-space size="md"> <lay-space size="md">
lg: <lay-tag>
<lay-tag size="lg">标签</lay-tag> <template #icon>
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag> <lay-icon type="layui-icon-vercode" />
<lay-tag size="lg" closable> </template>
<template #icon><lay-icon type="layui-icon-addition" /></template> tag
标签
</lay-tag> </lay-tag>
</lay-space> <lay-tag>
<lay-space size="md"> <template #icon>
md: <lay-icon type="layui-icon-login-qq" />
<lay-tag size="md">标签</lay-tag> </template>
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag> tag
<lay-tag size="md" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
标签
</lay-tag> </lay-tag>
</lay-space> <lay-tag>
<lay-space size="md"> <template #icon>
sm: <lay-icon type="layui-icon-star-fill" />
<lay-tag size="sm">标签</lay-tag> </template>
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag> tag
<lay-tag size="sm" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md">
xs:
<lay-tag size="xs">标签</lay-tag>
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="xs" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
标签
</lay-tag>
</lay-space>
</lay-space>
</template> </template>
<script> <script>
@ -87,21 +73,19 @@
::: :::
::: title 可关闭 ::: title 允许关闭
::: :::
::: demo 通过 closable 属性控制标签是否可关闭 ::: demo 通过 closable 属性开启关闭按钮, 使用 close-icon 插槽定义关闭图标。
<template> <template>
<lay-space size="md"> <lay-space size="md">
<lay-tag closable>Tag</lay-tag> <lay-tag closable>Tag</lay-tag>
<lay-tag closable> <lay-tag closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
Tag 2 Tag 2
</lay-tag> </lay-tag>
<lay-tag closable> <lay-tag closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> custom close icon
自定义关闭图标
<template #close-icon><lay-icon type="layui-icon-close-fill" /></template> <template #close-icon><lay-icon type="layui-icon-close-fill" /></template>
</lay-tag> </lay-tag>
</lay-space> </lay-space>
@ -122,40 +106,15 @@
::: :::
::: title 标签颜色 ::: title 指定颜色
::: :::
::: demo 标签颜色, 通过 color 属性自定义颜色 ::: demo 标签颜色, 通过 color 属性自定义颜色
<template> <template>
<lay-space direction="vertical" size="md"> <lay-space direction="vertical" size="md">
dark:
<lay-space size="md"> <lay-space size="md">
<lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
<lay-tag v-for="type in TAG_TYPES" :type="type" :bordered="false" closable>标签</lay-tag>
</lay-space>
light:
<lay-space size="md">
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="light">标签</lay-tag>
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="light" :bordered="false" closable>标签</lay-tag>
</lay-space>
plain:
<lay-space size="md">
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="plain">标签</lay-tag>
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="plain" :bordered="false" closable>标签</lay-tag>
</lay-space>
custom:
<lay-space size="md">
<lay-tag v-for="color in COLORS" :color="color" variant="dark">标签</lay-tag>
<lay-tag v-for="color in COLORS" :color="color" variant="dark" :bordered="false" closable>标签</lay-tag>
</lay-space>
<lay-space size="md">
<lay-tag v-for="color in COLORS" :color="color" variant="light">标签</lay-tag> <lay-tag v-for="color in COLORS" :color="color" variant="light">标签</lay-tag>
<lay-tag v-for="color in COLORS" :color="color" variant="light" :bordered="false" closable>标签</lay-tag>
</lay-space>
<lay-space size="md">
<lay-tag v-for="color in COLORS" :color="color" variant="plain">标签</lay-tag>
<lay-tag v-for="color in COLORS" :color="color" variant="plain" :bordered="false" closable>标签</lay-tag>
</lay-space> </lay-space>
</lay-space> </lay-space>
</template> </template>
@ -166,22 +125,12 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const TAG_TYPES = [ const COLORS = [
"primary", "#165DFF",
"normal", "#722ED1",
"warm", "#D91AD9",
"danger", "#F5319D",
]; ];
const COLORS = [
"#86909c",
"#9FDB1D",
"#14C9C9",
"#165DFF",
"#722ED1",
"#D91AD9",
"#F5319D",
];
return { return {
TAG_COLORS, TAG_COLORS,
@ -206,62 +155,16 @@ const COLORS = [
::: :::
::: title 图标插槽
:::
::: demo 通过插槽自定义图标
<template>
<lay-space size="md">
<lay-tag size="lg">
<template #icon>
<lay-icon type="layui-icon-vercode" />
</template>
tag
</lay-tag>
<lay-tag size="lg">
<template #icon>
<lay-icon type="layui-icon-login-qq" />
</template>
tag
</lay-tag>
<lay-tag size="lg">
<template #icon>
<lay-icon type="layui-icon-star-fill" />
</template>
tag
</lay-tag>
</lay-space>
</template>
<script>
</script>
<style>
.tag-demo {
width: 500px;
display: flex;
margin-bottom: 15px;
}
.tag-demo .layui-tag{
margin-right: 15px;
}
</style>
:::
::: title 动态编辑 ::: title 动态编辑
::: :::
::: demo ::: demo 配合自定义逻辑, 实现标签的动态编辑
<template> <template>
{{ tagData }}
<br><br>
<template v-for="(tag, index) of tagData" :key="`tag-${index}`"> <template v-for="(tag, index) of tagData" :key="`tag-${index}`">
<lay-tag <lay-tag
closable closable
@close="handleClose(index)" @close="handleClose(index)"
color="#EEE"
style="margin-right: 5px;" style="margin-right: 5px;"
> >
{{tag}} {{tag}}
@ -278,7 +181,6 @@ const COLORS = [
@blur="handleAdd" /> @blur="handleAdd" />
<lay-tag <lay-tag
v-else v-else
color="#EEE"
> >
<template #icon> <template #icon>
<lay-icon type="layui-icon-addition"/> <lay-icon type="layui-icon-addition"/>
@ -293,7 +195,7 @@ import { ref, nextTick } from 'vue';
export default { export default {
setup() { setup() {
const tagData = ref(['Tag']); const tagData = ref(['Tag', 'Selected', 'Tags']);
const inputRef = ref(null); const inputRef = ref(null);
const showInput = ref(false); const showInput = ref(false);
const inputVal = ref(''); const inputVal = ref('');