基于vue的ElementUI 简易弹窗封装（快速开发）

1.在vue文件中的components中新建一个ElDialogTemplate文件夹

2.在ElDialogTemplate文件夹中新建index.vue 文件

3.项目中需要的话直接调用即可

<template>
  <div>
    <el-dialog :title="EventTitle" :visible.sync="ElDialogShow" :width="ElDialogWidth"
               :close-on-click-modal="false"
               :before-close="CloseElDialog">

    </el-dialog>
  </div>
</template>
<script>
/*
*
* 此文件主要是 -> 做弹窗页面
* 可以快速复制粘贴使用
* 省去页面搭建的时间
*
* */


//script书写规范
// 编写代码时可删除多余注释
export default {
  name: "ElDialogTemplate",
  components: {},
  props:{
    //页面显示与关闭
    ElDialogShow:{
      type:Boolean
    },
    //接受父组件传过来的Form表单
    ElDialogForm:{
      type: Object
    }
  },
  data() {
    return {
      //标题
      EventTitle:'标题',
      //Dialog宽度
      ElDialogWidth:'50%'
    };
  },
  computed: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  methods: {
    //关闭页面
    CloseElDialog(){
    },
  },
  watch: {
    ElDialogForm: {
      handler(newVal, oldVal) {
        console.log(newVal)
      },
      deep: true,
      // immediate: true
      // deep 用于监听多级对象或者数组内部值的变化
      // immediate 在页面加载的时候就执行了一次
    }
  },

  filters: {},
  beforeDestroy() {},
  destroyed() {}
};

</script>

<style>
</style>