ElementUI弹窗简单组件化封装

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>

 

发布了24 篇原创文章 · 获赞 3 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/sunny123x/article/details/102599121