feat(Input & InputNumber): 增加 autofocus 配置项 (#721)

WeBankFinTech · Apr 8, 2024 · 2c6f549 · 2c6f549
1 parent 5da5598
commit 2c6f549
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 4 deletions.
diff --git a/components/input-number/input-number.vue b/components/input-number/input-number.vue
@@ -1,6 +1,7 @@
 <template>
     <div :class="classes" @dragstart.prevent>
         <InputInner
+            ref="inputRef"
             :modelValue="displayValue"
             :disabled="innerDisabled"
             :placeholder="placeholder"
@@ -58,6 +59,7 @@ import {
     ref,
     nextTick,
     defineComponent,
+    onMounted,
     type ComponentObjectPropsOptions,
 } from 'vue';
 import { isNumber } from 'lodash-es';
@@ -97,6 +99,10 @@ export const inputNumberProps = {
     precision: Number,
     disabled: Boolean,
     placeholder: String,
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type InputNumberProps = ExtractPublicPropTypes<typeof inputNumberProps>;
@@ -129,6 +135,7 @@ export default defineComponent({
             ),
         );
 
+        const inputRef = ref();
         const tempValue = ref();
         const displayValue = computed(() => {
             if (tempValue.value != null) return tempValue.value;
@@ -246,6 +253,15 @@ export default defineComponent({
             setCurrentValue(_calculationNum(currentValue.value || 0, type));
         };
 
+        const focus = () => {
+            inputRef.value.focus();
+        };
+        onMounted(() => {
+            if (props.autofocus) {
+                focus();
+            }
+        });
+
         return {
             prefixCls,
             isError,
@@ -260,6 +276,7 @@ export default defineComponent({
             displayValue,
             minDisabled,
             maxDisabled,
+            inputRef,
         };
     },
 });

diff --git a/components/input/input.vue b/components/input/input.vue
@@ -124,6 +124,10 @@ export const inputProps = {
         type: [Boolean, Object] as PropType<boolean | Autosize>,
         default: false as boolean | Autosize,
     },
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
     resize: String as PropType<
         'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline'
     >,
@@ -257,6 +261,12 @@ export default defineComponent({
             emit('clear');
         };
 
+        onMounted(() => {
+            if (props.autofocus) {
+                focus();
+            }
+        });
+
         return {
             innerDisabled,
             isError,

diff --git a/docs/.vitepress/components/input/common.vue b/docs/.vitepress/components/input/common.vue
@@ -4,6 +4,7 @@
             ref="inputRef"
             v-model="inputValue"
             placeholder="请输入"
+            :autofocus="true"
             @keydown="handleKeydown"
             @input="handleInput"
             @change="handleChange"

diff --git a/....vitepress/components/input/autofocus.vue → ...itepress/components/input/handleFocus.vue b/....vitepress/components/input/autofocus.vue → ...itepress/components/input/handleFocus.vue
@@ -28,10 +28,10 @@ export default {
         };
 
         const handleInputBlur = (e) => {
-            console.log('[input.autofocus] [blur] e:', e);
+            console.log('[input.handleFocus] [blur] e:', e);
         };
         const handleInputFocus = (e) => {
-            console.log('[input.autofocus] [focus] e:', e);
+            console.log('[input.handleFocus] [focus] e:', e);
         };
 
         return {

diff --git a/docs/.vitepress/components/input/index.md b/docs/.vitepress/components/input/index.md
@@ -69,7 +69,7 @@ event.vue
 ### 聚焦和失焦
 
 :::demo
-autofocus.vue
+handleFocus.vue
 :::
 
 ## Props
@@ -88,6 +88,7 @@ autofocus.vue
 | showWordLimit | 是否显示输入数字统计，只在 `type="textarea"` 时有效                                        | boolean         | false   |
 | showPassword  | 是否显示切换密码图标，仅`type`非`textarea`时有效                                           | boolean         | false   |
 | autosize      | 自适应内容高度，只在 `type="textarea"` 时有效，可输入对象，入 `{ minRows: 2, maxRows: 3 }` | boolean、object | false   |
+| autofocus     | 是否自动获取焦点                                                                           | boolean         | `false` |
 
 ## Slots
 

diff --git a/docs/.vitepress/components/inputNumber/common.vue b/docs/.vitepress/components/inputNumber/common.vue
@@ -8,6 +8,7 @@
         v-model="val"
         :max="100"
         :showStepAction="showStepAction"
+        :autofocus="true"
     ></FInputNumber>
 </template>
 

diff --git a/docs/.vitepress/components/inputNumber/index.md b/docs/.vitepress/components/inputNumber/index.md
@@ -47,7 +47,7 @@ app.use(FInputNumber);
 ## Props
 
 | 属性           | 说明             | 类型    | 默认值      |
-|:---------------|:---------------|:--------|:------------|
+| :------------- | :--------------- | :------ | :---------- |
 | modelValue     | v-model 双向绑定 | number  | -           |
 | min            | 计数器最小值     | number  | `-infinity` |
 | max            | 计数器最大值     | number  | `infinity`  |
@@ -56,6 +56,7 @@ app.use(FInputNumber);
 | disabled       | 是否禁用         | boolean | `false`     |
 | placeholder    | 输入框默认提示   | string  | -           |
 | precision      | 数值精度         | number  | -           |
+| autofocus      | 是否自动获取焦点 | boolean | `false`     |
 
 ## Slots