el-dialog封装公共弹窗，开箱即用。（基于vue）

前景：用el-dialog封装一个公共的弹窗，确认获取组件内容。

步骤一：创建modulDialog.vue文件

<template>
  <el-dialog
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :title="title"
      :width="width"
      :close-on-click-modal="false"
      :custom-class="customClass"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
    
    
  name: 'modulDialog',
  props: {
    
    
    value: {
    
    
      type: Boolean,
      default: false
    },
    title: {
    
    
      type: String,
      default: ''
    },
    width: {
    
    
      type: String,
      default: '50%'
    },
    customClass: {
    
    
      type: String,
      default: ''
    },
  },
  computed: {
    
    
    dialogVisible: {
    
    
      get() {
    
    
        return this.value;
      },
      set(val) {
    
    
        this.$emit('input', val);
      }
    }
  },
  methods: {
    
    
    confirm() {
    
    
      // 触发确认事件
      this.$emit('confirm');
      // 隐藏 Dialog
      // this.dialogVisible = false;
    }
  },
  beforeDestroy() {
    
    
    // 重置 visible 变量
    this.dialogVisible = false;
  }
};
</script>
<style scoped>
.dialog-footer {
    
    
  text-align: center;
  padding: 10px 0;
}
</style>

步骤二：引入modulDialog.vue（引入方式看自己，想全局和局部都行）

步骤三：使用

<modul-dialog :title="componentDialog.title" :width="componentDialog.width" v-model="componentDialog.openFalg" @confirm="confirmSummit">
//componentDialog.modulName就是各个组件的名称变量，ref必填
      <component ref="component" :is="componentDialog.modulName"/>
</modul-dialog>
 

import audit from '@/components/tableCommon/TableAudit.vue' //这个换自己的组件
components: {
    
    
    audit
  },
data() {
    
    
  return {
    
    
      componentDialog:{
    
    
        modulName:'', //组件名称
        title:'',
        width:'',
        openFalg:false
      }
  } 
},
methods: {
    
    
//操作例子 audit是我组件名称
    this.openModulDialog('审核操作','audit','400px',true)

//打开窗口
    openModulDialog(title,modulName,width,openFalg){
    
    
      this.componentDialog.title=title
      this.componentDialog.modulName=modulName
      this.componentDialog.width=width
      this.componentDialog.openFalg=openFalg
    },
    //点击确认
    confirmSummit(){
    
    
    //这个是我组件里的校验方法
      console.log('changeVerification',this.$refs.component.changeVerification())
      //这个是我组件里的data数据
      console.log('e',this.$refs.component.form)
    },
}
    

上图：（这样就能做到一个弹窗可切换多个组件，不需要写多个弹窗，只需要添加自己的组件就行）