feat(search): [search] Increase input maximum character limit attribu…

…te maxlength
opentiny · Mar 1, 2024 · ebe0c07 · ebe0c07
1 parent 41fa0ce
commit ebe0c07
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/examples/sites/demos/apis/search.js b/examples/sites/demos/apis/search.js
@@ -74,6 +74,17 @@ export default {
           pcDemo: 'events',
           mfDemo: ''
         },
+        {
+          name: 'maxlength',
+          type: 'number',
+          defaultValue: '',
+          desc: {
+            'zh-CN': 'input 框的原生属性，限制最大输入字符数【3.14.0新增】',
+            'en-US': 'The native properties of the input box limit the maximum number of input characters[New 3.14.0]'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
         {
           name: 'mini',
           type: 'boolean',

diff --git a/examples/sites/demos/pc/app/search/basic-usage.vue b/examples/sites/demos/pc/app/search/basic-usage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键词"></tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :maxlength="10"></tiny-search>
     <div class="mt10">当前搜索值为：{{ value }}</div>
   </div>
 </template>

diff --git a/examples/sites/demos/pc/app/search/webdoc/search.js b/examples/sites/demos/pc/app/search/webdoc/search.js
@@ -9,9 +9,10 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN': '通过 <code>v-model</code> 设置双向绑定搜索值， <code>placeholder</code> 设置默认占位符文本。',
+        'zh-CN':
+          '通过 <code>v-model</code> 设置双向绑定搜索值， <code>placeholder</code> 设置默认占位符文本， <code>input</code>元素的原生属性<code>maxlength</code> 设置输入框最大输入字符长度。',
         'en-US':
-          'Set bidirectional binding search values through <code>v-model</code> , and set default placeholder text through <code>placeholder</code> .'
+          'Set bidirectional binding search values through <code>v-model</code> , and set default placeholder text through <code>placeholder</code> The native attribute of the <code>input</code> element<code>maxlength</code>sets the maximum input character length of the input box.'
       },
       codeFiles: ['basic-usage.vue']
     },

diff --git a/packages/vue/src/search/src/index.ts b/packages/vue/src/search/src/index.ts
@@ -92,7 +92,8 @@ export const searchProps = {
     default: 'small'
   },
   typeValue: Object,
-  suffixIcon: [Object, String]
+  suffixIcon: [Object, String],
+  maxlength: Number
 }
 
 export default defineComponent({

diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue
@@ -36,6 +36,7 @@
       </transition>
       <input
         ref="input"
+        :maxlength="maxlength"
         v-model="state.currentValue"
         :style="
           transparent
@@ -110,7 +111,8 @@ export default defineComponent({
     'clearable',
     'isEnterSearch',
     'typeValue',
-    'size'
+    'size',
+    'maxlength'
   ],
   emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'],
   components: {