[Element]给项目中所有的dialog添加打开关闭监听

在Vue项目中，给所有的dialog组件添加打开和关闭的监听器，可以通过全局的指令来实现。以下是一个简单的例子，假设你使用的是Element UI库中的dialog组件：

1. 首先，创建一个全局指令文件，比如directives.js。

// directives.js
import Vue from 'vue';
 
Vue.directive('dialog-listener', {
  bind(el, binding) {
    const openCallback = binding.value.open;
    const closeCallback = binding.value.close;
 
    if (el.open) {
      el.addEventListener('open', openCallback);
    }
    if (el.close) {
      el.addEventListener('close', closeCallback);
    }
  },
  unbind(el, binding) {
    const openCallback = binding.value.open;
    const closeCallback = binding.value.close;
 
    if (el.open) {
      el.removeEventListener('open', openCallback);
    }
    if (el.close) {
      el.removeEventListener('close', closeCallback);
    }
  }
});

2. 在你的main.js或相应的入口文件中引入这个指令文件。

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './directives'; // 引入全局指令
 
Vue.use(ElementUI);
 
// ... 其他Vue初始化代码

3. 在你的组件中使用这个指令，确保提供打开和关闭的回调函数。

<template>
  <el-dialog
    :visible="dialogVisible"
    v-dialog-listener="{ open: handleOpen, close: handleClose }"
  >
    <!-- dialog content -->
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleOpen() {
      console.log('Dialog opened');
    },
    handleClose() {
      console.log('Dialog closed');
    },
  },
};
</script>

在这个例子中，我们创建了一个全局指令dialog-listener，它会在dialog组件绑定时监听打开和关闭事件，并调用相应的回调函数。这样，你就可以在多个地方使用这个指令，而不需要在每个dialog实例中单独处理打开和关闭的逻辑。