基于element-plus的el-dialog二次封装

在Vue.js中，可以通过组件的方式对element-plus的el-dialog组件进行二次封装。以下是一个简单的例子：

首先，创建一个新的Vue组件，例如MyDialog.vue：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="handleClose"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script>
import { ElDialog } from 'element-plus';
import { ref } from 'vue';
 
export default {
  name: 'MyDialog',
  components: {
    ElDialog
  },
  props: {
    title: String,
    width: {
      type: String,
      default: '30%'
    }
  },
  emits: ['update:visible', 'close', 'confirm'],
  setup(props, { emit }) {
    const visible = ref(props.visible);
 
    const handleClose = () => {
      visible.value = false;
      emit('update:visible', false);
      emit('close');
    };
 
    const handleConfirm = () => {
      emit('confirm');
    };
 
    return {
      visible,
      handleClose,
      handleConfirm
    };
  }
};
</script>

然后，你可以在父组件中使用MyDialog组件：

<template>
  <my-dialog
    :visible="dialogVisible"
    @update:visible="dialogVisible = $event"
    @confirm="handleConfirm"
    title="提示"
  >
    <!-- 这里是你的对话框内容 -->
    <p>这是一个对话框示例。</p>
  </my-dialog>
</template>
 
<script>
import MyDialog from './path/to/MyDialog.vue';
 
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleConfirm() {
      // 处理确认事件
      this.dialogVisible = false;
    }
  }
};
</script>

在这个例子中，MyDialog组件接收title、width和visible属性，并定义了handleClose和handleConfirm方法来处理关闭和确认事件。父组件通过update:visible事件来更新对话框的显示状态。这是一个简单的封装例子，你可以根据实际需求对其进行扩展。