在Vue中使用Element UI时，可以通过el-dialog组件创建一个提示框，并且可以监听键盘事件来实现回车确认和Esc取消的功能。以下是一个简单的示例：
<template>
<el-dialog
:visible.sync="dialogVisible"
@open="handleOpen"
@close="handleClose"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmAction">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleOpen() {
// 监听回车事件
document.addEventListener('keyup', this.handleKeyUp);
},
handleClose() {
// 移除监听
document.removeEventListener('keyup', this.handleKeyUp);
},
handleKeyUp(e) {
if (e.keyCode === 13) { // 回车键
this.confirmAction();
} else if (e.keyCode === 27) { // Esc键
this.dialogVisible = false;
}
},
confirmAction() {
// 执行确认操作
console.log('确认操作执行');
}
}
};
</script>在这个示例中，el-dialog的visible属性用于控制对话框的显示与隐藏。handleOpen方法在对话框打开时被调用，它监听键盘事件。handleClose方法在对话框关闭时被调用，它移除键盘事件的监听。handleKeyUp方法处理键盘按键事件，根据按键不同执行不同的操作。