element-plus el-dialog before-close 事件传参

当 el-dialog 即将关闭时，可以通过 before-close 事件来传递参数。在触发关闭事件之前，可以在事件回调函数中设置一个参数，然后在关闭事件的处理函数中获取该参数。

例如：

<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    是否确定关闭？
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '关闭提示',
    };
  },
  methods: {
    handleClose(done) {
      // 在 before-close 事件中设置一个参数
      done(this.message);
    },
    handleConfirm(message) {
      // 在关闭事件处理函数中获取参数
      console.log('关闭事件处理函数', message);
      this.visible = false;
    },
  },
};
</script>

在 before-close 事件的回调函数中，调用 done 函数并传递参数，该参数将作为关闭事件的处理函数的参数。在关闭事件处理函数中，可以获取该参数并进行相应的处理。

相关问题

vue3 element-plus dialog销毁

在Vue3中，Element Plus Dialog的销毁可以通过调用它的close()方法来实现。例如：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="Hello world"
    width="30%"
    :before-close="beforeClose">
    <span>这是一段信息</span>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);
    
    const beforeClose = (done) => {
      // 在此处添加销毁逻辑
      done();
    }
    
    const handleConfirm = () => {
      // 点击“确定”按钮后的逻辑
      dialogVisible.value = false;
    }

    return {
      dialogVisible,
      beforeClose,
      handleConfirm,
    }
  }
}
</script>

在beforeClose函数中，我们可以添加关闭Dialog前需要执行的逻辑，例如清空数据等。当beforeClose函数执行完成后，我们可以通过调用done()方法来关闭Dialog，并且该方法会返回一个Promise对象，可以在Promise对象resolved后执行关闭Dialog的逻辑。

请你用vue3+element-plus+ts二次封装一个el-dialog

好的，我可以为你提供一个基本的ElDialog封装，供你参考：

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :custom-class="customClass"
    :width="width"
    :lock-scroll="lockScroll"
    :modal-append-to-body="modalAppendToBody"
    :destroy-on-close="destroyOnClose"
    :center="center"
    @opened="handleOpen"
    @closed="handleClosed"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot></slot>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElDialog } from 'element-plus';

export default defineComponent({
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '',
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    customClass: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '50%',
    },
    lockScroll: {
      type: Boolean,
      default: true,
    },
    modalAppendToBody: {
      type: Boolean,
      default: true,
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    center: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update:dialogVisible', 'opened', 'closed'],
  methods: {
    handleClose(done: () => void) {
      // 自定义关闭操作
      done();
    },
    handleOpen() {
      this.$emit('opened');
    },
    handleClosed() {
      this.$emit('closed');
    },
  },
  components: {
    ElDialog,
  },
});
</script>

这里我们使用了Vue3的Composition API，使用`defineComponent`定义了一个组件，并引入了Element Plus的ElDialog组件。

我们将ElDialog组件的属性和事件通过props和emits暴露出来，并在组件内部进行了一些自定义操作，如自定义关闭操作和自定义事件触发。

你可以根据自己的需求对组件进行进一步封装和定制化。