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

package/component/src/component/tag/index.less

@@ -7,7 +7,7 @@
 
  @tagSizes: lg, md, sm, xs;
 
- @tag-size-default: 28px;
+ @tag-size-default: 26px;
  @tag-size-default-font-size: 14px;
  @tag-size-lg: @tag-size-default + 4px;
  @tag-size-md: @tag-size-default;
@@ -20,8 +20,8 @@
  @tag-border-width: 1px;
 
  .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-text-color: currentColor;
    display: inline-flex;
@@ -81,7 +81,6 @@
      text-overflow: ellipsis
    }
 
-
    & &-close-icon {
      margin-left: 4px;
      font-size: @tag-size-default-font-size;

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

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