控件按键回车键生效，不失焦

2023-11-04 01:40:29

在Vue项目中，使用element-ui库的<el-button>组件，搭配Layer弹框组件时，多次按下回车键会出现多个弹框重叠的问题。这是因为回车键默认会触发<el-button>组件的点击事件，而点击事件会导致控件失焦，进而导致Layer弹框无法正确接收回车键事件。

为了解决这个问题，需要禁用<el-button>组件的回车键默认行为，同时在Layer弹框中重新聚焦，从而让回车键在弹框中生效。具体实现方法如下：

禁用`<el-button>`组件的回车键默认行为

在<el-button>组件中，可以使用@keyup.enter事件来禁用回车键的默认行为。该事件会在按下回车键时触发，可以阻止其触发点击事件。

<el-button @keyup.enter.native="onEnter"></el-button>

methods: {
  onEnter(e) {
    e.preventDefault();
  }
}

在Layer弹框中重新聚焦

在Layer弹框中，可以使用focus()方法来重新聚焦。当回车键按下时，可以触发一个自定义事件，然后在事件处理函数中调用focus()方法。

// Layer弹框组件
import { Message } from 'element-ui';

export default {
  methods: {
    onFocus() {
      this.$refs.layerRef.focus();
      Message('重新聚焦');
    }
  }
}

完整代码示例

<template>
  <div>
    <el-button @keyup.enter.native="onEnter">按钮</el-button>
    <layer-dialog @focus="onFocus"></layer-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  methods: {
    onEnter(e) {
      e.preventDefault();
    },
    onFocus() {
      this.$refs.layerRef.focus();
      Message('重新聚焦');
    }
  }
};
</script>