From e9e54bb967e69d021fa45ee241a6f7b847ff99b5 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Sat, 6 Aug 2022 12:46:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20[tag]=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=20shape,=20disabled=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/tag/index.less    | 33 ++++++++++++++++++-
 package/component/src/component/tag/index.vue | 10 ++++--
 .../src/document/zh-CN/components/tag.md      |  2 ++
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/package/component/src/component/tag/index.less b/package/component/src/component/tag/index.less
index d3d7792d..4f001411 100644
--- a/package/component/src/component/tag/index.less
+++ b/package/component/src/component/tag/index.less
@@ -34,6 +34,36 @@
     border-color: var(--global-neutral-color-5);
   }
 
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+
+    & .layui-tag-close-icon {
+      .layui-icon {
+
+        &:hover {
+          cursor: not-allowed !important;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &-shap {
+    &-square {
+      border-radius: var(--global-border-radius);
+    }
+
+    &-round {
+      border-radius: 12px;
+    }
+  }
+&-ellipsis {
+  white-space: nowwrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
   &-size-lg {
     height: @tag-size-lg;
     font-size: @tag-size-lg-font-size;
@@ -82,7 +112,8 @@
 
       &:hover {
         cursor: pointer;
+        opacity: 0.5;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package/component/src/component/tag/index.vue b/package/component/src/component/tag/index.vue
index a38c6ef9..cd4490a4 100644
--- a/package/component/src/component/tag/index.vue
+++ b/package/component/src/component/tag/index.vue
@@ -14,13 +14,14 @@ export interface LayTagProps {
   closable?: boolean;
   size?: string;
   bordered?: boolean;
+  disabled?: boolean;
+  shape?: "square" | "round";
 }
 
 const props = withDefaults(defineProps<LayTagProps>(), {
-  color: "green",
+  color: "#EEE",
   size: "md",
-  closable: false,
-  bordered: false,
+  shape: "square"
 });
 
 const emit = defineEmits(["close"]);
@@ -35,6 +36,7 @@ const isCustomColor = computed(
 const visible = ref(true);
 
 const handleClose = (e: MouseEvent) => {
+  if(props.disabled) return;
   //visible.value = false;
   emit("close", e);
 };
@@ -42,9 +44,11 @@ const handleClose = (e: MouseEvent) => {
 const classTag = computed(() => [
   "layui-tag",
   `layui-tag-size-${props.size}`,
+  `layui-tag-shap-${props.shape}`,
   {
     [`layui-bg-${props.color}`]: isBuiltInColor,
     "layui-tag-bordered": props.bordered,
+    "layui-tag-disabled": props.disabled,
   },
 ]);
 
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 1f8c4aba..56f3b572 100644
--- a/package/document-component/src/document/zh-CN/components/tag.md
+++ b/package/document-component/src/document/zh-CN/components/tag.md
@@ -18,6 +18,8 @@
   <lay-tag bordered color="#FFF">tag</lay-tag>
   &nbsp&nbsp
   <lay-tag closable>tag</lay-tag>
+  &nbsp&nbsp
+  <lay-tag closable disabled>tag</lay-tag>
 </template>
 
 <script>