vue elementUI 提示框弹框回车确认时间，Esc取消

在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方法处理键盘按键事件，根据按键不同执行不同的操作。