✨(component): [tagInput]modelValue 添加 tagData[] 类型

package/component/src/component/select/index.less

@@ -3,6 +3,9 @@
 
   .layui-tag-input{
     width: 220px;
+    &-clear{
+      visibility: unset;
+    }
   }
 }
 

package/component/src/component/tagInput/index.less

@@ -53,6 +53,7 @@
     padding-right: 10px;
     color: rgba(0, 0, 0, 0.45);
     cursor: pointer;
+    visibility: hidden;
   }
 
   &-clear:hover {
@@ -96,8 +97,6 @@
     }
   }
 
-
-
   .set-size(@size) {
     @height: ~'tag-input-@{size}';
     @tag-margin-top: ~'tag-margin-top-@{size}';
@@ -141,6 +140,6 @@
 .layui-tag-input:focus-within {
   border-color: #d2d2d2 !important;
   .layui-tag-input-clear{
-    display: flex;
+    visibility: visible;
   }
 }

package/component/src/component/tagInput/index.vue

@@ -16,7 +16,12 @@ import {
   reactive,
   nextTick,
 } from "vue";
-import { reactiveOmit, useResizeObserver, useVModel } from "@vueuse/core";
+import {
+  isObject,
+  reactiveOmit,
+  useResizeObserver,
+  useVModel,
+} from "@vueuse/core";
 import { LayIcon } from "@layui/icons-vue";
 
 export interface TagData {
@@ -63,17 +68,20 @@ const tagData = useVModel(props, "modelValue", emit, {
 const _tagProps = reactive(props.tagProps ?? {});
 const tagProps = reactiveOmit(_tagProps, "closable", "size", "disabled");
 
+const normalizedTags = computed(() => normalizedTagData(tagData.value ?? []));
+
 const computedTagData = computed(() => {
-  if (!tagData.value) return;
+  if (!normalizedTags.value) return;
   return props.minCollapsedNum
-    ? tagData.value?.slice(0, props.minCollapsedNum)
+    ? normalizedTags.value?.slice(0, props.minCollapsedNum)
-    : tagData.value;
+    : normalizedTags.value;
 });
 
 const collapsedTagData = computed(() => {
-  if (!tagData.value) return;
+  if (!normalizedTags.value) return;
-  return props.minCollapsedNum && tagData.value?.length > props.minCollapsedNum
+  return props.minCollapsedNum &&
-    ? tagData.value?.slice(props.minCollapsedNum)
+    normalizedTags.value?.length > props.minCollapsedNum
+    ? normalizedTags.value?.slice(props.minCollapsedNum)
     : [];
 });
 
@@ -161,6 +169,16 @@ const cls = computed(() => [
   },
 ]);
 
+const normalizedTagData = (value: Array<string | number | TagData>) =>
+  value.map((item) => {
+    if (isObject(item)) return item;
+    return {
+      value: item,
+      label: String(item),
+      closable: true,
+    };
+  });
+
 useResizeObserver(mirrorRefEl, () => {
   handleResize();
 });
@@ -206,11 +224,11 @@ defineExpose({
       >
         <LayTag
           v-bind="tagProps"
-          :closable="!readonly && !disabled"
+          :closable="!readonly && !disabled && item.closable"
           :size="size"
           @close="handleClose(index)"
         >
-          {{ item }}
+          {{ item.label }}
         </LayTag>
       </template>
       <template v-if="computedTagData?.length != tagData?.length">
@@ -229,11 +247,11 @@ defineExpose({
                 v-for="(item, index) of collapsedTagData"
                 :key="`${item}-${index}`"
                 v-bind="tagProps"
-                :closable="!readonly && !disabled"
+                :closable="!readonly && !disabled && item.closable"
                 :size="size"
                 @close="handleClose(index + (minCollapsedNum ?? 0))"
               >
-                {{ item }}
+                {{ item.label }}
               </LayTag>
             </div>
           </template>

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

@@ -21,7 +21,7 @@ import { ref,watch } from 'vue'
 
 export default {
   setup() {
-    const data1 = ref(['Vue']);
+    const data1 = ref([{value:1,label:'Vue',closable: true}]);
     const inputValue1 = ref("");
 
     return {
@@ -216,7 +216,7 @@ export default {
 
 | 属性        | 描述     | 类型    | 默认值    | 可选值                             |
 | ----------- | -------- | ------ | ------ | ------ |
-| modelValue  | 绑定值  | `string` `number` | -| -|
+| modelValue  | 绑定值  | `string[]` `number[]` `TagData[]`| -| -|
 | size | 输入框大小 |`string` | `md` | `lg` `md` `sm` `xs`|
 | inputValue | 输入框的值 | `string` | -| - | 
 | placeholder | 占位符 | `string` | - | - |
@@ -231,6 +231,16 @@ export default {
 
 :::
 
+:::title TagInput 方法
+:::
+
+:::table
+| 名称 | 描述 | 参数 |
+|------ |----------|-----------|
+| focus | 获取焦点 | - |
+| blur |失去焦点  | - |
+:::
+
 :::title TagInput 插槽
 :::