📝: 补充 tagInput 文档

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

@@ -30,7 +30,6 @@ export interface LayInputTagProps {
   modelValue?: (string | number | TagData)[];
   inputValue?: string;
   disabled?: boolean;
-  disabledInput?: boolean;
   placeholder?: string;
   readonly?: boolean;
   allowClear?: boolean;
@@ -39,15 +38,12 @@ export interface LayInputTagProps {
   collapseTagsTooltip?: boolean;
   size?: "lg" | "md" | "sm" | "xs";
   tagProps?: LayTagProps;
+  disabledInput?: boolean;
 }
 
 const props = withDefaults(defineProps<LayInputTagProps>(), {
-  disabled: false,
+  placeholder: undefined,
-  disabledInput: false,
+  minCollapsedNum: 0,
-  placeholder: "",
-  readonly: false,
-  allowClear: false,
-  minCollapsedNum: 3,
   size: "md",
 });
 
@@ -223,7 +219,12 @@ defineExpose({
         </LayTag>
       </template>
       <template v-if="computedTagData?.length != tagData?.length">
-        <LayToopTip :isDark="false" trigger="click" popperStyle="padding:6px">
+        <LayToopTip
+          :isDark="false"
+          trigger="hover"
+          popperStyle="padding:6px"
+          :disabled="!collapseTagsTooltip"
+        >
           <LayTag v-bind="tagProps" key="more" :closable="false" :size="size">
             +{{ moreCount }}...
           </LayTag>

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

@@ -13,7 +13,7 @@
 ::: demo 使用 `lay-tag-input` 标签, 创建标签输入框。  
 
 <template>
-  <lay-tag-input v-model="data1" v-model:inputValue="inputValue1"></lay-tag-input>
+  <lay-tag-input v-model="data1" v-model:inputValue="inputValue1" placeholder="请输入"></lay-tag-input>
 </template>
 
 <script>
@@ -21,7 +21,7 @@ import { ref,watch } from 'vue'
 
 export default {
   setup() {
-    const data1 = ref(['Vue', 'React']);
+    const data1 = ref(['Vue']);
     const inputValue1 = ref("");
 
     return {
@@ -34,13 +34,13 @@ export default {
 
 :::
 
-::: title 禁用状态
+::: title 数量限制
 :::
 
-::: demo 使用 `lay-tag-input` 标签, 创建标签输入框。  
+::: demo 使用 `max` 控制最大标签数量。  
 
 <template>
-  <lay-tag-input v-model="data4" v-model:inputValue="inputValue4" :disabled="true"></lay-tag-input>
+  <lay-tag-input v-model="data2" v-model:inputValue="inputValue2" :max="3" placeholder="最多输入3个"></lay-tag-input>
 </template>
 
 <script>
@@ -48,7 +48,64 @@ import { ref,watch } from 'vue'
 
 export default {
   setup() {
-    const data4 = ref(['Vue', 'React']);
+    const data2 = ref([]);
+    const inputValue2 = ref("");
+
+    return {
+      data2,
+      inputValue2
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 折叠标签
+:::
+
+::: demo 通过`minCollapsedNum` 设置最小折叠数，超过这个数的标签会被折叠， `collapseTagsTooltip`启用鼠标悬停显示具体折叠标签。  
+
+<template>
+<lay-space direction="vertical">
+ collapseTags<lay-tag-input v-model="data3" v-model:inputValue="inputValue3" :minCollapsedNum="3" style="width:auto"></lay-tag-input>
+ collapseTagsTooltip <lay-tag-input v-model="data3" v-model:inputValue="inputValue3" :minCollapsedNum="3" collapseTagsTooltip style="width:auto"></lay-tag-input>
+</lay-space>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data3 = ref(['标签1','标签2','标签3','标签4']);
+    const inputValue3 = ref("");
+
+    return {
+      data3,
+      inputValue3
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 禁用状态
+:::
+
+::: demo  
+
+<template>
+  <lay-tag-input v-model="data4" v-model:inputValue="inputValue4" disabled></lay-tag-input>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data4 = ref(['标签1','标签2']);
     const inputValue4 = ref("");
 
     return {
@@ -64,10 +121,10 @@ export default {
 ::: title 允许清空
 :::
 
-::: demo 使用 `lay-tag-input` 标签, 创建标签输入框。  
+::: demo
 
 <template>
-  <lay-tag-input v-model="data5" v-model:inputValue="inputValue5" :allow-clear="true"></lay-tag-input>
+  <lay-tag-input v-model="data5" v-model:inputValue="inputValue5" allow-clear></lay-tag-input>
 </template>
 
 <script>
@@ -75,7 +132,7 @@ import { ref,watch } from 'vue'
 
 export default {
   setup() {
-    const data5 = ref(['Vue', 'React']);
+    const data5 = ref(['标签1','标签2']);
     const inputValue5 = ref("");
 
     return {
@@ -86,4 +143,100 @@ export default {
 }
 </script>
 
+:::
+
+::: title 不同尺寸
+:::
+
+::: demo  
+
+<template>
+<lay-space direction="vertical">
+  <lay-tag-input v-model="data6" v-model:inputValue="inputValue6" size="xs"></lay-tag-input>
+  <lay-tag-input v-model="data6" v-model:inputValue="inputValue6" size="sm"></lay-tag-input>
+  <lay-tag-input v-model="data6" v-model:inputValue="inputValue6" size="md"></lay-tag-input>
+  <lay-tag-input v-model="data6" v-model:inputValue="inputValue6" size="lg"></lay-tag-input>
+</lay-space>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data6 = ref(['标签1','标签2']);
+    const inputValue6 = ref("");
+
+    return {
+      data6,
+      inputValue6
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 不同主题
+:::
+
+::: demo 使用 `tagProps` 控制标签属性。  
+
+<template>
+<lay-space direction="vertical">
+  <lay-tag-input v-model="data7" v-model:inputValue="inputValue7" :tagProps="{color:'#86909c',variant:'light', bordered:false}"></lay-tag-input>
+  <lay-tag-input v-model="data7" v-model:inputValue="inputValue7" :tagProps="{color:'#ffb400',variant:'light'}"></lay-tag-input>
+  <lay-tag-input v-model="data7" v-model:inputValue="inputValue7" :tagProps="{color:'#0fc6c2',variant:'light'}"></lay-tag-input>
+  <lay-tag-input v-model="data7" v-model:inputValue="inputValue7" :tagProps="{color:'#409EFF',variant:'light'}"></lay-tag-input>
+</lay-space>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data7 = ref(['标签1','标签2']);
+    const inputValue7 = ref("");
+
+    return {
+      data7,
+      inputValue7
+    }
+  }
+}
+</script>
+
+:::
+
+::: title TagInput 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 类型    | 默认值    | 可选值                             |
+| ----------- | -------- | ------ | ------ | ------ |
+| modelValue  | 绑定值  | `string` `number` | -| -|
+| size | 输入框大小 |`string` | `md` | `lg` `md` `sm` `xs`|
+| inputValue | 输入框的值 | `string` | -| - | 
+| placeholder | 占位符 | `string` | - | - |
+| readonly | 是否可关闭 | `boolean` | `false` | `true` `false`|
+| allowClear  | 允许清空  | `boolean` | `false` | `true` `false`|
+| disabled | 是否禁用  | `boolean` | `false` | `true` `false`|
+| max    | 最大输入标签数量  | `number` | -|-|
+| minCollapsedNum | 最小折叠数量 | `number`| - | -|
+| collapseTagsTooltip|是否悬浮显示折叠标签| `boolean` | `false` | `true` `false`|
+| tagProps| tag 属性| `LayTagProps`|-|-|
+| disabledInput|是否禁用内部输入框|`boolean` | `false` | `true` `false`|
+
+:::
+
+:::title TagInput 插槽
+:::
+
+:::table
+| 插槽 | 描述 | 参数 |
+|------ |----------|-----------|
+| prefix | 前置插槽 | - |
+| suffix | 后置插槽 | - |
 :::