使用vue2封装一个el-dialog组件

好的，下面是一个基本的 `el-dialog` 封装示例：

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <slot></slot>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确定关闭吗？').then(() => {
        done()
      }).catch(() => {})
    },
    handleSubmit() {
      // 点击确定按钮后的操作
    }
  }
}
</script>

使用示例：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开对话框</el-button>
    <my-dialog :title="'自定义标题'">
      <p>这是一个自定义的对话框</p>
    </my-dialog>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    MyDialog
  },
  methods: {
    showDialog() {
      this.$refs.dialog.dialogVisible = true
    }
  }
}
</script>

在这个示例中，我们封装了一个名为 `MyDialog` 的组件，它接受一个 `title` 属性作为对话框标题，同时提供了一个 `handleSubmit` 方法用于在点击确定按钮时执行一些操作。

我们在模板中使用了 `slot` 插槽来插入自定义的对话框内容，并在底部放置了两个按钮。在父组件中，我们可以通过 `ref` 引用子组件，然后通过 `this.$refs.dialog.dialogVisible = true` 来打开对话框。