✨(component): [tag]新增 variant 属性, 优化颜色表现

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

@@ -1,125 +1,188 @@
-@tag-size-default: 24px;
+ @tagColors: {
-@tag-size-default-font-size: 12px;
+   default: #EEE;
-@tag-size-lg: @tag-size-default + 2px;
+   red: #ff5722;
-@tag-size-md: @tag-size-default;
+   orange: #ffb800;
-@tag-size-sm: @tag-size-default - 2px;
+   green: #009688;
-@tag-size-xs: @tag-size-default - 2px * 2;
+   cyan: #2f4056;
-@tag-size-lg-font-size: @tag-size-default-font-size + 2px;
+   blue: #1e9fff;
-@tag-size-md-font-size: @tag-size-default-font-size;
+   black: #000000;
-@tag-size-sm-font-size: @tag-size-default-font-size - 2px;
+   gray: #808080;
-@tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2;
+ }
-@tag-border-width: 1px;
 
-.layui-tag {
+ @tag-size-default: 24px;
-  display: inline-flex;
+ @tag-size-default-font-size: 12px;
-  align-items: center;
+ @tag-size-lg: @tag-size-default + 2px;
-  vertical-align: middle;
+ @tag-size-md: @tag-size-default;
-  box-sizing: border-box;
+ @tag-size-sm: @tag-size-default - 2px;
-  height: @tag-size-md;
+ @tag-size-xs: @tag-size-default - 2px * 2;
-  line-height: @tag-size-md - @tag-border-width * 2;
+ @tag-size-lg-font-size: @tag-size-default-font-size + 2px;
-  padding: 0 6px;
+ @tag-size-md-font-size: @tag-size-default-font-size;
-  font-size: @tag-size-md-font-size;
+ @tag-size-sm-font-size: @tag-size-default-font-size - 2px;
-  font-weight: 500;
+ @tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2;
-  color: currentColor;
+ @tag-border-width: 1px;
-  border-width: @tag-border-width;
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--global-border-radius);
 
-  &-icon {
+ .layui-tag {
-    margin-right: 4px;
+   display: inline-flex;
-  }
+   align-items: center;
+   vertical-align: middle;
+   box-sizing: border-box;
+   height: @tag-size-md;
+   line-height: @tag-size-md - @tag-border-width * 2;
+   padding: 0 6px;
+   font-size: @tag-size-md-font-size;
+   font-weight: 500;
+   color: currentColor;
+   border-width: @tag-border-width;
+   border-style: solid;
+   border-color: transparent;
+   border-radius: var(--global-border-radius);
 
-  &-bordered {
+   &-checkable {
-    border-color: var(--global-neutral-color-5);
+     cursor: pointer;
-  }
+   }
 
-  &-disabled {
+   &-checkable:hover {
-    opacity: 0.4;
+     opacity: 0.7;
-    cursor: not-allowed;
+   }
 
-    & .layui-tag-close-icon {
+   &-checked {
-      .layui-icon {
+     background-color: darken(red, 10%) !important;
+   }
 
-        &:hover {
+   &-icon {
-          cursor: not-allowed !important;
+     margin-right: 4px;
-          opacity: 1;
+   }
-        }
-      }
-    }
-  }
 
-  &-shap {
+   &-bordered {
-    &-square {
+     border-color: var(--global-neutral-color-5);
-      border-radius: var(--global-border-radius);
+   }
-    }
 
-    &-round {
+   &-disabled {
-      border-radius: 12px;
+     opacity: 0.4;
-    }
+     cursor: not-allowed;
-  }
+   }
 
-  &-ellipsis {
+   &-disabled &-close-icon {
-    .layui-tag-text {
+     .layui-icon {
-      display: inline-block;
-      white-space: nowrap;
-      word-wrap: normal;
-      overflow: hidden;
-      text-overflow: ellipsis
-    }
 
-  }
+       &:hover {
+         cursor: not-allowed !important;
+         opacity: 1;
+       }
+     }
+   }
 
-  &-size-lg {
+   &-shap {
-    height: @tag-size-lg;
+     &-square {
-    font-size: @tag-size-lg-font-size;
+       border-radius: var(--global-border-radius);
-    line-height: @tag-size-lg - @tag-border-width * 2;
+     }
 
-    .layui-icon {
+     &-round {
-      font-size: @tag-size-lg-font-size - 2px;
+       border-radius: 12px;
-    }
+     }
-  }
+   }
 
-  &-size-md {
+   &-ellipsis &-text {
-    height: @tag-size-md;
+     display: inline-block;
-    font-size: @tag-size-md-font-size;
+     white-space: nowrap;
-    line-height: @tag-size-md - @tag-border-width * 2;
+     word-wrap: normal;
+     overflow: hidden;
+     text-overflow: ellipsis
+   }
 
-    .layui-icon {
+   &-size-lg {
-      font-size: @tag-size-md-font-size - 2px;
+     height: @tag-size-lg;
-    }
+     font-size: @tag-size-lg-font-size;
-  }
+     line-height: @tag-size-lg - @tag-border-width * 2;
 
-  &-size-sm {
+     .layui-icon {
-    height: @tag-size-sm;
+       font-size: @tag-size-lg-font-size - 2px;
-    font-size: @tag-size-sm-font-size;
+     }
-    line-height: @tag-size-sm - @tag-border-width * 2;
+   }
 
-    .layui-icon {
+   &-size-md {
-      font-size: @tag-size-sm-font-size - 2px;
+     height: @tag-size-md;
-    }
+     font-size: @tag-size-md-font-size;
-  }
+     line-height: @tag-size-md - @tag-border-width * 2;
 
-  &-size-xs {
+     .layui-icon {
-    height: @tag-size-xs;
+       font-size: @tag-size-md-font-size - 2px;
-    font-size: @tag-size-xs-font-size;
+     }
-    line-height: @tag-size-xs - @tag-border-width * 2;
+   }
 
-    .layui-icon {
+   &-size-sm {
-      font-size: @tag-size-xs-font-size - 2px;
+     height: @tag-size-sm;
-    }
+     font-size: @tag-size-sm-font-size;
-  }
+     line-height: @tag-size-sm - @tag-border-width * 2;
 
-  & &-close-icon {
+     .layui-icon {
-    margin-left: 4px;
+       font-size: @tag-size-sm-font-size - 2px;
-    font-size: @tag-size-default-font-size - 2px;
+     }
+   }
 
-    .layui-icon {
+   &-size-xs {
+     height: @tag-size-xs;
+     font-size: @tag-size-xs-font-size;
+     line-height: @tag-size-xs - @tag-border-width * 2;
 
-      &:hover {
+     .layui-icon {
-        cursor: pointer;
+       font-size: @tag-size-xs-font-size - 2px;
-        opacity: 0.5;
+     }
-      }
+   }
-    }
+
-  }
+   & &-close-icon {
-}
+     margin-left: 4px;
+     font-size: @tag-size-default-font-size - 2px;
+
+     .layui-icon {
+
+       &:hover {
+         cursor: pointer;
+         opacity: 0.5;
+       }
+     }
+   }
+
+   each(@tagColors, {
+     &-default {
+       &-color-@{key} {
+         color: #FFF;
+         background-color: @value;
+         border-color: transparent;
+       }
+
+       &-bordered-@{key} {
+         border-color: saturate(@value, 10%);
+       }
+
+       &-checked-color-@{key} {
+         background-color: darken(@value, 10%);
+       }
+
+     }
+
+     &-light {
+       &-color-@{key} {
+         color: @value;
+         background-color: fadeout(saturate(lighten(@value, 13%),5%),85%);
+         border-color: transparent;
+       }
+
+       &-bordered-@{key} {
+         border-color: fadeout(saturate(lighten(@value, 13%), 5%), 50%);
+       }
+     }
+
+     &-plain {
+       &-color-@{key} {
+         color: @value;
+         background-color: transparent;
+         border-color: @value;
+       }
+
+       &-bordered-@{key} {
+         border-color: @value;
+       }
+     }
+   })
+ }

package/component/src/component/tag/index.vue

@@ -16,16 +16,18 @@ export interface LayTagProps {
   bordered?: boolean;
   disabled?: boolean;
   shape?: "square" | "round";
-  maxWidth?: number | string;
+  maxWidth?: string;
+  variant?: "default" | "light" | "plain";
 }
 
 const props = withDefaults(defineProps<LayTagProps>(), {
   color: "#EEE",
   size: "md",
   shape: "square",
+  variant: "default",
 });
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(["close", "check", "update:checked"]);
 
 const isBuiltInColor = computed(
   () => props.color && TAG_COLORS.includes(props.color as any)
@@ -33,7 +35,6 @@ const isBuiltInColor = computed(
 const isCustomColor = computed(
   () => props.color && !TAG_COLORS.includes(props.color as any)
 );
-
 const visible = ref(true);
 
 const handleClose = (e: MouseEvent) => {
@@ -47,7 +48,9 @@ const classTag = computed(() => [
   `layui-tag-size-${props.size}`,
   `layui-tag-shap-${props.shape}`,
   {
-    [`layui-bg-${props.color}`]: isBuiltInColor,
+    [`layui-tag-${props.variant}-color-${props.color}`]: isBuiltInColor.value,
+    [`layui-tag-${props.variant}-bordered-${props.color}`]:
+      isBuiltInColor.value && props.bordered,
     "layui-tag-bordered": props.bordered,
     "layui-tag-disabled": props.disabled,
     "layui-tag-ellipsis": props.maxWidth,
@@ -57,12 +60,9 @@ const classTag = computed(() => [
 const styleTag = computed(() => [
   isCustomColor.value ? { backgroundColor: props.color } : {},
   {
-    "max-width": props.maxWidth ?? "unset"
+    "max-width": props.maxWidth ?? "unset",
   },
-]
+]);
-);
-
-
 </script>
 <template>
   <span v-if="visible" :class="classTag" :style="styleTag">
@@ -73,7 +73,11 @@ const styleTag = computed(() => [
       <slot />
     </span>
     <slot v-else />
-    <span v-if="closable" class="layui-tag-close-icon" @click.stop="handleClose">
+    <span
+      v-if="closable"
+      class="layui-tag-close-icon"
+      @click.stop="handleClose"
+    >
       <slot name="close-icon">
         <lay-icon type="layui-icon-close"></lay-icon>
       </slot>

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

@@ -115,18 +115,53 @@
 ::: title 标签颜色
 :::
 
-::: demo 标签颜色,待优化。
+::: demo 标签颜色, 非内置颜色只支持默认样式, plain 默认有边框。
 
 <template>
+  <p>default:</p>
   <span v-for="color in TAG_COLORS">
   <lay-tag :color="color">Tag</lay-tag>
   &nbsp&nbsp
   </span>
-  <br><br>
+  &nbsp&nbsp&nbsp&nbsp
   <span v-for="color in TAG_COLORS">
-  <lay-tag :color="color" bordered>Tag</lay-tag>
+  <lay-tag :color="color" bordered closable>Tag</lay-tag>
   &nbsp&nbsp
   </span>
+  <br><br>
+  <p>light:</p>
+  <span v-for="color in TAG_COLORS">
+  <lay-tag :color="color" variant="light">Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  &nbsp&nbsp&nbsp&nbsp
+  <span v-for="color in TAG_COLORS">
+  <lay-tag :color="color" variant="light" bordered closable>Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  <br><br>
+  <p>plain:</p>
+  <span v-for="color in TAG_COLORS">
+  <lay-tag :color="color" variant="plain">Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  &nbsp&nbsp&nbsp&nbsp
+  <span v-for="color in TAG_COLORS">
+  <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  <br><br>
+  <p>custom:</p>
+  <span v-for="color in COLORS">
+  <lay-tag :color="color" variant="plain">Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  &nbsp&nbsp&nbsp&nbsp
+  <span v-for="color in COLORS">
+  <lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
+  &nbsp&nbsp
+  </span>
+  <br><br>
 </template>
 
 <script>
@@ -143,13 +178,18 @@ export default {
   "blue",
   "black",
   "gray",
+];
+
+const COLORS = [
   "#EEE",
-  "#5FB878",
+  "#67C23A",
-  "#FFB800",
+  "#0fc6c2",
+  "#165dff"
 ];
 
     return {
-      TAG_COLORS
+      TAG_COLORS,
+      COLORS
     }
   }
 }
@@ -286,7 +326,11 @@ export default {
 | size | 标签大小 | string | md | `lg` `md` `sm` `xs`|
 | color | 标签颜色 | string | `green`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` | 
 | bordered | 是否显示边框 | boolean | false | `true` `false`|
-| closable |  是否可关闭 | boolean | false | `true` `false`|
+| closable | 是否可关闭 | boolean | false | `true` `false`|
+| variant  | 标签风格  | string | `default` | `default` `light` `plain`|
+| disabled | 禁用标签  | boolean | false | `true` `false`|
+| shape    | 标签类型  | string | square | `square` `round`|
+| maxWidth | 标签最大宽度 | string| -- | --|
 
 :::