elementui dialog 回车时却刷新整个页面

在使用 Element UI 的 Dialog 组件时，如果按下回车键导致整个页面刷新，这通常是因为 Dialog 内部没有阻止回车键的默认行为。你可以通过在 Dialog 打开时监听键盘事件来解决这个问题。

以下是一个简单的例子，展示如何在 Vue 中使用 Element UI 的 Dialog 组件时阻止回车键刷新页面：

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    :visible.sync="dialogVisible"
    @open="handleOpen"
    @close="handleClose"
    title="提示"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleOpen() {
      // 添加键盘事件监听，阻止回车键默认行为
      document.addEventListener('keypress', this.handleKeyPress);
    },
    handleClose() {
      // 移除键盘事件监听
      document.removeEventListener('keypress', this.handleKeyPress);
    },
    handleKeyPress(e) {
      // 检查按键是否为回车键，并阻止默认行为
      if (e.keyCode === 13) {
        e.preventDefault();
      }
    }
  }
};
</script>

在这个例子中，当 Dialog 打开时，我们通过 handleOpen 方法添加了一个键盘事件监听器，它会检查按下的键是否是回车键（keyCode 为 13），如果是，就阻止其默认行为。当 Dialog 关闭时，我们通过 handleClose 方法移除监听器。这样做可以确保在 Dialog 打开期间，即使用户按下回车键，也不会导致页面刷新。