feat(input): 增加软键盘确认事件(#2229) (#2622)

jdf2e · Nov 1, 2023 · 896e4bf · 896e4bf
1 parent 78f1f3b
commit 896e4bf
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 6 deletions.
diff --git a/src/packages/__VUE/input/__tests__/input.spec.ts b/src/packages/__VUE/input/__tests__/input.spec.ts
@@ -1,5 +1,6 @@
-import { mount } from '@vue/test-utils';
+import { DOMWrapper, mount } from '@vue/test-utils';
 import Input from '../index.vue';
+import { nextTick, ref } from 'vue';
 
 test('base', () => {
   const wrapper = mount(Input, { props: { modelValue: '3' } });
@@ -17,6 +18,43 @@ test('should emit blur event when input is blur', () => {
   wrapper.find('input').trigger('blur');
   expect(wrapper.emitted('blur')).toBeTruthy();
 });
+test('should emit confirm event when input is confirm', () => {
+  const wrapper = mount(Input);
+  wrapper.find('input').trigger('keyup', { keyCode: 13, key: 'Enter' });
+  expect(wrapper.emitted('keyup')).toBeTruthy();
+});
+test('trigger ref select', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-input': Input
+    },
+    template: `
+      <nut-input ref="inputRef" v-model="value" :show-word-limit="true" max-length="20" />
+      <button class="select-button" @click="onSelect">选中</button>
+    `,
+    setup() {
+      const inputRef = ref<{
+        select: () => void;
+      } | null>(null);
+      const value = ref('Hello');
+      const onSelect = () => {
+        inputRef.value?.select();
+      };
+      return {
+        inputRef,
+        value,
+        onSelect
+      };
+    }
+  });
+  const selectButton: DOMWrapper<Element> = wrapper.find('.select-button');
+  selectButton.trigger('click');
+  await nextTick();
+  expect(selectButton.exists()).toBe(true);
+  const inputElement = wrapper.find('input');
+  expect(inputElement.element.selectionStart).toBe(0);
+  expect(inputElement.element.selectionEnd).toBe(inputElement.element.value.length);
+});
 
 test('should render clear icon when using clearable prop', async () => {
   const wrapper = mount(Input, {

diff --git a/src/packages/__VUE/input/doc.en-US.md b/src/packages/__VUE/input/doc.en-US.md
@@ -281,6 +281,7 @@ const val = ref('');
 | clear | Emitted when the clear icon is clicked | `event` |
 | click | Emitted when component is clicked | `event` |
 | click-input | Emitted when the input is clicked | `event` |
+| confirm`4.2.1` | Triggered when you click the soft keyboard to confirm ｜ `event` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/input/doc.md b/src/packages/__VUE/input/doc.md
@@ -287,6 +287,7 @@ const val = ref('');
 | clear | 点击清除按钮时触发 | `event` |
 | click | 点击组件时触发 | `event` |
 | click-input | 点击输入区域时触发 | `event` |
+| confirm`4.2.1` | 点击软键盘确认时触发 ｜ `event` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/input/doc.taro.md b/src/packages/__VUE/input/doc.taro.md
@@ -302,6 +302,7 @@ const val = ref('');
 | clear | 点击清除按钮时触发 | `event` |
 | click | 点击组件时触发 | `event` |
 | click-input | 点击输入区域时触发 | `event` |
+| confirm`4.2.1` | 点击软键盘确认时触发 ｜ `event` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
@@ -29,6 +29,8 @@
             @change="endComposing"
             @compositionend="endComposing"
             @compositionstart="startComposing"
+            @confirm="onConfirm"
+            @keyup="onKeyup"
           ></component>
           <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
           <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
@@ -60,7 +62,7 @@ import { formatNumber } from './util';
 import { MaskClose } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 
-import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType } from './type';
+import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType, InputEvent } from './type';
 
 const { componentName, create } = createComponent('input');
 
@@ -153,7 +155,7 @@ export default create({
     }
   },
   components: { MaskClose },
-  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput'],
+  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
 
   setup(props, { emit }) {
     const active = ref(false);
@@ -307,6 +309,17 @@ export default create({
         }
       }
     };
+
+    const onKeyup = (e: KeyboardEvent) => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB && e.key === 'Enter') {
+        emit('confirm', e);
+      }
+    };
+
+    const onConfirm = (e: InputEvent) => {
+      emit('confirm', e);
+    };
+
     watch(
       () => props.modelValue,
       () => {
@@ -335,7 +348,9 @@ export default create({
       startComposing,
       endComposing,
       onClick,
-      onClickInput
+      onClickInput,
+      onConfirm,
+      onKeyup
     };
   }
 });

diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
@@ -26,6 +26,7 @@
             @change="endComposing"
             @compositionend="endComposing"
             @compositionstart="startComposing"
+            @keyup="onKeyup"
           ></component>
           <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
             <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
@@ -141,7 +142,7 @@ export default create({
   },
   components: { MaskClose },
 
-  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput'],
+  emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
   expose: ['focus', 'blur', 'select'],
 
   setup(props, { emit }) {
@@ -293,6 +294,12 @@ export default create({
       inputRef.value?.select();
     };
 
+    const onKeyup = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        emit('confirm', e);
+      }
+    };
+
     return {
       renderInput,
       inputRef,
@@ -309,7 +316,8 @@ export default create({
       onClickInput,
       focus,
       blur,
-      select
+      select,
+      onKeyup
     };
   }
 });

diff --git a/src/packages/__VUE/input/type.ts b/src/packages/__VUE/input/type.ts
@@ -39,3 +39,9 @@ export type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 export interface InputTarget extends HTMLInputElement {
   composing?: boolean;
 }
+
+export interface InputEvent extends Event {
+  detail: {
+    value: any;
+  };
+}