element-plus Input 组件 实现回车事件绑定

没有search或者keydown事件真离谱

import { ref, onUnmounted, watch } from 'vue';

import { type InputInstance } from 'element-plus';

interface InputEnterProps {
  onEnter?: (e: KeyboardEvent) => void;
}
export const useElementPlusInputEnter = (props?: InputEnterProps) => {
  const inputRef = ref<InputInstance | null>(null);
  const onEnterTask = ref<InputEnterProps['onEnter']>();
  const inputRawRef = ref<HTMLInputElement | null>(null);

  const inputEnterListener = (e: KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      props?.onEnter?.(e);
      onEnterTask.value?.(e);
    }
  };

  const unbindInputEnterListener = () => {
    inputRawRef.value?.removeEventListener?.('keyup', inputEnterListener);
  };
  const bindInputEnterListener = () => {
    inputRawRef.value?.addEventListener?.('keyup', inputEnterListener);
  };

  watch(
    () => inputRef?.value,
    (val) => {
      if (val?.input) {
        unbindInputEnterListener();
        inputRawRef.value = val.input;
        bindInputEnterListener();
      } else {
        // 实际没进来，在unMounted的时候实际移除
        unbindInputEnterListener();
      }
    },
  );

  onUnmounted(() => {
    unbindInputEnterListener();
    inputRawRef.value = null;
  });

  const onEnter = (task: InputEnterProps['onEnter']) => {
    onEnterTask.value = task;
  };

  return {
    inputRef,
    onEnter,
  };
};