Vue项目中，一个页面可能有多个弹窗出现，因此可对单个弹框进行了简单封装，弹窗默认隐藏，某个事件或条件触发时，父组件让指定弹窗显示。

弹窗子组件：

 <template>
    <el-dialog :visible.sync="visible" :title="modalObj.title" :width="modalObj.width" :modal='modalObj.modal' :before-close="modalClose" center  :close-on-click-modal="false"
        :close-on-press-escape="false" >
        <el-form :inline='true' :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="任务名称：" prop="taskName">
                <el-input v-model="ruleForm.taskName" placeholder="请输入任务名称" ></el-input>
            </el-form-item>
            <!--弹出层按钮居中-->
            <div style="text-align: center">
                <el-button @click="modalClose" size="small">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm',ruleForm)" size="small">保存</el-button>
          </div>
        </el-form>
    </el-dialog>
</template>
<script> 
    export default {
        name: 'timeTask-add-layer',
        data() {
            // 验证
            let validateTaskName = (rule, value, callback) => {
                   let _this = this;
                var pattern = /^.{1,12}$/;
                if (!pattern.test(value)) {
                    callback(new Error('任务名称长度在2到12个字符！'))
                } else {
                    callback();
                }
            }
            return {
                ruleForm: {
                    taskName: ''
                },
                rules: {
                    taskName: [
                        { required: true, message: '请输入任务名称!', trigger: 'blur' },
                        { validator: validateTaskName, trigger: 'change' },
                    ]
                }
            };
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            modalObj: {
                type: Object, 
                default: false
            } 
        },
        mounted() {
            //表单初始
        },
        methods: {
            // 信息提交
            submitForm(formName, formData) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       //判断modalObj中id是否为空，决定是编辑还是添加请求操作；
                       this.modalClose(); 
                    } else {
                       //验证失败处理
                        return false;
                    }
                });
            },
            // 关闭弹出框
            modalClose() {
                this.$emit('update:visible', false); // 直接修改父组件的属性 
            }
        }
    };
</script>

弹窗父组件引用：

<template>
  <el-container> 
     <el-button type="primary" icon="el-icon-plus" @click='addTask' size='small'>添加</el-button>
    <!-- 设置定时运行 -->
    <EquiTimingRunModel v-if="equiTimingRunVisible" :visible.sync="equiTimingRunVisible" :modalObj='modalObj'></EquiTimingRunModel>
 
  </el-container>
</template>

<script>
  import EquiTimingRunModel from '@/components/equiTiming-run-layer.vue';
    name: "EquipmentManage",
    components: { 
      EquiTimingRunModel 
    },
    data() {
      return {
        equiTimingRunVisible: false  //弹出框唯一标识
      };
    },
    methods: {  
      // 添加设备信息
      addTask() {
        let _this = this;
        _this.equiTimingRunVisible = true; //指定弹出框显示
        _this.modalObj = { title: '添加',modal: true, width: '700px', id: '' };  //编辑时，id不为空；添加时，id为空。弹窗需要嵌套时，modal: false；不需要则为true。
      }
    }
  };
</script>