在使用 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 打开期间，即使用户按下回车键，也不会导致页面刷新。