el-dialog二次封装之后open方法调用两次

在Vue.js中，`el-dialog`是Element UI库中的一个弹窗组件。当你对它进行二次封装时，可能会遇到在某些场景下打开对话框时，发现`open`方法被意外地调用了两次的问题。这通常发生在以下情况：

1. **生命周期钩子调用错误**：如果你在封装后的组件的某个生命周期钩子（如`beforeCreate`, `created`, 或者自定义的方法）中意外地调用了`this.$refs.dialog.open()`，那么每次创建组件时这个方法就会被执行一次。

2. **事件监听重复**：如果你在组件内部添加了多次`@open="handleOpen"`这样的事件监听器，每次触发该事件都会导致`open`方法执行一次。

3. **复用组件**：如果你在一个列表循环中渲染多个同类型的封装`el-dialog`，每个元素都有独立的`ref`引用，打开弹窗操作如果在列表渲染完成后再统一处理，也可能会误触发所有`dialog`的`open`方法。

解决这个问题的关键是检查并确保`open`方法只在预期的地方、适当的时机被调用。可以删除多余的事件监听，避免在不必要的生命周期阶段调用，或者优化列表渲染，确保`open`操作按需执行。

相关问题

element el-dialog二次封装

### 如何实现 Element UI `el-dialog` 组件的二次封装

#### 使用 `useDialog` Hook 实现更灵活的弹窗组件

为了使 `el-dialog` 更加灵活和易于使用，可以利用 Vue 的组合式 API 创建一个名为 `useDialog` 的 Hook 来简化逻辑处理。这种方式不仅提高了代码复用率还增强了组件间的解耦合度。

import { ref, reactive } from 'vue';

function useDialog(defaultProps = {}) {
    const visible = ref(false);
    const props = reactive({
        ...defaultProps,
        visible: false
    });

    function open(options) {
        Object.assign(props, options || {});
        visible.value = true;
    }

    function close() {
        visible.value = false;
    }

    return {
        visible,
        props,
        open,
        close
    };
}

当需要展示对话框时调用 `open()` 方法传入配置项；关闭则调用 `close()`[^1]。

#### 替换特定类名与挂载对象以适应不同场景

对于不同的业务需求可能涉及到修改默认样式或是行为上的调整，在这种情况下只需要更改 JavaScript 中获取到的相关 class 名字以及对应的 DOM 节点即可完成定制化操作而无需改动原有结构[^2]。

#### 自定义指令支持拖拽功能

为了让 `el-dialog` 支持拖拽效果可以在模板里加入自定义属性 `v-draggable` 并配合 CSS 设置防止意外选中文本内容：

<template>
  <div>
    <el-dialog v-model="dialogVisible" title="可拖拽对话框" width="50%" :close-on-click-modal="false" v-draggable >
      <p>拖拽标题栏移动对话框！</p>
    </el-dialog>
    <el-button @click="dialogVisible = true">打开对话框</el-button>
  </div>
</template>

<script setup>
import {ref} from "vue";

const dialogVisible = ref(false);

// 定义 draggable 指令...
</script>

<style scoped>
/* 防止选中标题文字 */
.el-dialog__header {
  user-select: none;
}
</style>

这里的关键在于实现了简单的拖动交互体验的同时保持了良好的用户体验设计原则[^3]。

#### 解决样式差异问题

考虑到实际开发过程中可能会遇到的需求变化或者视觉风格的要求不一致等问题，通过对 element-ui 原生组件做一层薄薄的包装能够很好地满足这些特殊场合下的应用诉求。具体做法就是基于官方提供的基础版本之上再做一些个性化的修饰工作，最后借助于 Vue 提供的强大工具链——如插件机制、全局注册等方式将其融入整个项目体系之中[^4]。

el-dialog open不生效

根据引用\[1\]中的描述，你使用了elementUI的弹窗插件el-dialog，并设置了destroy-on-close属性为true，但是发现open方法并没有生效。根据引用\[2\]中的描述，可以使用@opened事件来监听弹窗打开的事件。你可以在openMethods方法中获取元素并进行相应的操作。另外，根据引用\[3\]中的描述，如果你在子组件的dialog上设置了@close="$emit('close-dialog')"，那么在父组件中可以通过监听close-dialog事件来执行相应的操作。请检查你的代码是否正确设置了这些属性和事件，并确保openMethods方法被正确调用。
#### 引用[.reference_title]
- *1* [el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法](https://blog.csdn.net/qq_21473443/article/details/127106152)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue中使用Element 第一次打开el-dialog获取不到元素的解决办法](https://blog.csdn.net/m0_46129241/article/details/104000599)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【bug】关于Vue封装el-dialog对话框关闭无反应问题](https://blog.csdn.net/weixin_49668076/article/details/127938465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]