element-ui中dialog封装模板

以下是一个简单的 Element UI 中 Dialog 组件的封装模板：

<template>
  <div>
    <el-button @click="showDialog">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" :title="title">
      <!-- 弹窗内容 -->
      <slot></slot>
      <!-- 弹窗底部按钮 -->
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleConfirm() {
      // 确认按钮点击事件
      this.$emit('confirm');
      this.dialogVisible = false;
    },
  },
};
</script>

使用时，可以通过 `title` 属性设置弹窗标题，通过插入组件内容设置弹窗内容，通过监听 `confirm` 事件来处理确认按钮的点击事件。

示例：

<template>
  <my-dialog title="提示" @confirm="handleConfirm">
    <p>确定删除此项吗？</p>
  </my-dialog>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog,
  },
  methods: {
    handleConfirm() {
      // 处理确认按钮点击事件
    },
  },
};
</script>