elemenUI弹框二次封装

 效果图：

 1、弹框组件

<template>
  <!-- 封装弹框 -->
  <div class="popup">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :width="popupWidth"
      :before-close="handleClose"
      :modal="modal"
    >
      <slot>
        <p>弹框自定义的内容</p>
      </slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogTitle: {
      type: String,
      default: "标题",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: false,
    },
    popupWidth: {
      type: String,
      default: "550px",
    },
  },
  computed: {
    isShowDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerisShowDialog的值
        this.$emit("updateVisible", val);
      },
    },
  },
  methods: {
    Cancel() {
      this.$emit("cancelBtn");
    },
    Save() {
      this.$emit("submitBtn");
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>

<style lang="less">
.popup {
  .el-dialog {
    z-index: 10000;
    background-color: #f8f8f8;
    box-shadow: 0px 0px 10px 0px rgba(207, 207, 209, 0.5);
    border-radius: 15px;
    margin-top: 10% !important;
  }
  .el-dialog__header {
    width: 100%;
    height: 40px;
    line-height: 48px;
    border-bottom: 1px solid #f6f7f9;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #424155;
  }
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 20px;
    width: 17px;
    height: 17px;
    color: #424155;
  }
  .el-dialog__footer {
    .el-button {
      padding: 12px 40px !important;
      border-radius: 6px;
      &:nth-child(1) {
        margin-right: 30px;
      }
    }
    .el-button.el-button--default {
      color: #3c3d4f;
      border: 1px solid #dadada;
      background: #e6e6e6;
    }
    .el-button.el-button--primary {
      color: #fff;
      border: 1px solid #3d68f3;
      background: #3d68f3;
    }
  }
  .el-dialog__body {
    margin: 24px 22px;
    margin-top: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    border: 1px solid#E9E9E9;
    .el-form{
        width: 90%;
    }
    .el-select{
        width: 100%;
    }
    .el-input__inner{
        background: #F9F9F9;
    }
  }
  .el-dialog__headerbtn {
    top: 15px;
  }
  .el-dialog__title {
    color: #3c4354;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    line-height: 16px;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>

2、全局引入组件

在main.js中全局引入并注册

import Dialog from "./components/content/views/commonDialog";
Vue.component('Dialog',Dialog)

 3、在vue页面中使用

<template>
  <div>
    <Dialog
      :dialogTitle="dialogTitle"
      :visible.sync="isShowDialog"
      @updateVisible="updateVisible"
      @cancelBtn="cancelBtn"
      @submitBtn="submitBtn"
      @handleClose="handleClose"
      :popupWidth="'550px'"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="活动名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowDialog: true, // 弹框的出现与否
      dialogTitle: "通过", // 标题
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         
        },
        formLabelWidth: '120px',
    };
  },
  mounted() {
    
  },
  methods: {
    // 修改是否让页面显示与隐藏的事件
    updateVisible(val) {
      this.isShowDialog = val;
    },
    // 点击取消的事件
    cancelBtn() {
      //  这里可重置数据
      this.isShowDialog = false;
    },
    // 点击确定的按钮
    async submitBtn() {
      this.isShowDialog = false;
    },
    // 关闭弹框（头部的X）
    handleClose() {
      this.isShowDialog = false;
    },
  },
};
</script>

<style scoped lang="less">

</style>