From 8b6f7279508cf68a56819baf6065cc2f378bbfa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 22 Sep 2022 19:01:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E8=B0=83=E6=95=B4=20ta?=
 =?UTF-8?q?g=20=E6=A0=B7=E5=BC=8F,=20=E7=AE=80=E5=8C=96=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=20demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/tag/index.less    |   7 +-
 .../src/document/zh-CN/components/tag.md      | 182 ++++--------------
 2 files changed, 45 insertions(+), 144 deletions(-)

diff --git a/package/component/src/component/tag/index.less b/package/component/src/component/tag/index.less
index ac372024..07e2df30 100644
--- a/package/component/src/component/tag/index.less
+++ b/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-border-color: var(--global-neutral-color-5);
+   --layui-tag-bg-color: #fafafa;
+   --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;
diff --git a/package/document-component/src/document/zh-CN/components/tag.md b/package/document-component/src/document/zh-CN/components/tag.md
index b3f1fa12..ffe3503f 100644
--- a/package/document-component/src/document/zh-CN/components/tag.md
+++ b/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 closable disabled>标签</lay-tag>
-  <lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
-</lay-space>
+  <lay-space size="md">
+    <lay-tag>标签</lay-tag>
+    <lay-tag v-for="type in TAG_TYPES" :type="type">标签</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 size="lg">标签</lay-tag>
-  <lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
-  <lay-tag size="lg" closable>
-    <template #icon><lay-icon type="layui-icon-addition" /></template>
-    标签
+  <lay-tag>
+    <template #icon>
+      <lay-icon type="layui-icon-vercode" />
+    </template>
+    tag
   </lay-tag>
-</lay-space>
-<lay-space size="md">
-  md: 
-  <lay-tag size="md">标签</lay-tag>
-  <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
-  <lay-tag size="md" closable>
-    <template #icon><lay-icon type="layui-icon-addition" /></template>
-    标签
+  <lay-tag>
+    <template #icon>
+      <lay-icon type="layui-icon-login-qq" />
+    </template>
+    tag
   </lay-tag>
-</lay-space>
-<lay-space size="md">
-  sm: 
-  <lay-tag size="sm">标签</lay-tag>
-  <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
-  <lay-tag size="sm" closable>
-    <template #icon><lay-icon type="layui-icon-addition" /></template>
-    标签
+  <lay-tag>
+    <template #icon>
+      <lay-icon type="layui-icon-star-fill" />
+    </template>
+    tag
   </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,22 +125,12 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-  const TAG_TYPES = [
-  "primary",
-  "normal",
-  "warm",
-  "danger",
-];
-
-const COLORS = [
-  "#86909c",
-  "#9FDB1D",
-  "#14C9C9",
-  "#165DFF",
-  "#722ED1",
-  "#D91AD9",
-  "#F5319D",
-];
+    const COLORS = [
+      "#165DFF",
+      "#722ED1",
+      "#D91AD9",
+      "#F5319D",
+    ];
 
     return {
       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 动态编辑
 :::
 
-::: 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('');