如何封装一个Vue + ElementUI的弹窗组件

要封装一个Vue + ElementUI的弹窗组件，你可以创建一个新的Vue组件，并使用ElementUI的Dialog组件。以下是一个简单的例子：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :before-close="handleClose">
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '30%'
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleConfirm() {
      this.$emit('confirm');
      this.dialogVisible = false;
    }
  }
};
</script>

使用该组件时，你可以这样做：

<template>
  <my-dialog :visible.sync="dialogVisible" title="自定义标题" width="40%">
    <p>这里是内容部分</p>
  </my-dialog>
</template>
 
<script>
import MyDialog from './path/to/MyDialog.vue';
 
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

在这个例子中，MyDialog组件接收title和width作为props，并且定义了一个名为visible的双向绑定，它通过.sync修饰符与父组件中的dialogVisible进行同步。它还定义了一个默认的确认和取消按钮，并且可以通过插槽插入自定义内容。使用时，只需要在父组件中引入MyDialog组件，并通过visible.sync来控制弹窗的显示与隐藏。