✨(component): [tag]添加 shape, disabled 属性

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;
       }
     }
   }
-}
+}

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,
   },
 ]);
 

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>