el-dialog封装

el-dialog是Element UI库中的一个组件，用于实现对话框的显示和交互。下面是一个简单的el-dialog封装的示例：

<template>
  <div>
    <button @click="showDialog">打开对话框</button>
    <el-dialog
      :visible.sync="dialogVisible"
      title="对话框标题"
      width="50%"
      @close="closeDialog"
    >
      <!-- 对话框内容 -->
      <p>这是一个对话框示例</p>
      <!-- 可插入更多内容 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false // 控制对话框显示与隐藏的变量
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true; // 打开对话框
    },
    closeDialog() {
      this.dialogVisible = false; // 关闭对话框
    }
  }
};
</script>

在上述示例中，我们通过`dialogVisible`变量来控制el-dialog的显示与隐藏。点击"打开对话框"按钮时，会触发`showDialog`方法，将`dialogVisible`设置为true，从而显示对话框。点击对话框右上角的关闭按钮或点击遮罩时，会触发`closeDialog`方法，将`dialogVisible`设置为false，从而关闭对话框。

你可以根据自己的需求来扩展和定制el-dialog的样式和功能。希望对你有所帮助！如果你有更多问题，请继续提问。