vue实现指令的形式通过esc键关闭el-dialog弹窗

可以通过自定义指令来实现这个功能。首先，在Vue实例中定义一个自定义指令`v-close-dialog-on-esc`：

Vue.directive('close-dialog-on-esc', {
  bind(el, binding, vnode) {
    const dialog = vnode.componentInstance.$parent.$el;
    const closeDialog = () => {
      vnode.componentInstance.visible = false;
    };
    dialog.addEventListener('keydown', (e) => {
      if (e.keyCode === 27) { // 27为Esc键的keyCode
        closeDialog();
      }
    });
  },
});

指令的作用是：在弹窗中按下Esc键时，关闭弹窗。

在需要使用这个指令的`el-dialog`组件上添加`v-close-dialog-on-esc`指令即可：

<el-dialog v-close-dialog-on-esc></el-dialog>

这样，当用户在这个弹窗中按下Esc键时，弹窗会自动关闭。

相关问题

ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他el-dialog的关闭按钮会导致该对话框关闭

当你在Element UI + Vue项目中遇到这样的问题，即点击了外部的另一个`el-dialog`的关闭按钮会意外地关闭当前对话框，这通常是由于`el-dialog`默认的行为设置导致的。`el-dialog`有一个名为`close-on-click-modal`的属性，默认值为`true`，这意味着当用户点击对话框之外的地方（包括另一个对话框）时，它会自动关闭。

要解决这个问题，你需要禁用这个特性。这里是如何操作的：

1. 首先，在你的Vue组件中引入`ElementUI`并禁用`close-on-click-modal`属性，例如在`data()`函数里初始化：

export default {
  data() {
    return {
      dialogProps: {
        closeOnPressEscape: true, // 保留ESC关闭功能
        closeOnClickModal: false, // 关闭对话框时不响应点击模态区域
      },
    };
  },
};

2. 当创建`el-dialog`实例时，传递这个自定义属性：

<el-dialog v-model="dialogVisible" :props="dialogProps">
  <!-- ... -->
</el-dialog>

通过以上步骤，当用户点击另一个`el-dialog`的关闭按钮时，当前对话框将不会被关闭。

vue 区分el-dialog关闭事件和将el-dialog的显隐条件置为false

在Vue中，可以通过给el-dialog组件绑定visible属性来控制其显隐状态。当visible为true时，el-dialog会显示出来；当visible为false时，el-dialog会隐藏起来。而关闭事件是指用户点击el-dialog右上角的关闭按钮或者按下ESC键触发的事件。

为了区分这两种情况，我们可以通过监听el-dialog的closed事件来判断是否是用户手动关闭的。如果是用户手动关闭的，那么closed事件会被触发；如果是将visible属性置为false导致的关闭，那么closed事件不会被触发。

具体实现代码如下：

<template>
  <el-dialog
    :visible="dialogVisible"
    @closed="handleClosed"
  >
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClosed() {
      console.log('用户手动关闭了对话框')
    },
    closeDialog() {
      // 将visible属性置为false
      this.dialogVisible = false
    }
  }
}
</script>