Dialog 对话框的二次封装

Dialog 对话框的二次封装
组件

<template>
  <div>
    <el-button type="primary" @click="dialogBasket =true">主要按钮</el-button>
    <add-dialog
        :dialogTitle="dialogTitle"
        :visible.sync="dialogBasket"
        @updateVisible="updateVisible"
        @resetPopupData="resetPopupData"
        @submitPopupData="submitPopupData"
        @handleClose="handleClose"
        :popupWidth="'550px'"
        :slot_querys="dialogform"
    >
      <template>
        <el-form :model="dialogform">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="dialogform.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="dialogform.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>

    </add-dialog>
  </div>
</template>

<script>
import dialog from "../../../components/dialog/dialog";

export default {
  name: "creator",
  components: {
    'add-dialog':dialog
  },
  data() {
    return {
      formLabelWidth: 100,
      dialogBasket: false, // 弹框的出现与否
      dialogTitle: '通过', // 标题
      dialogform: {
        name: null,
        region: null,
      },
      slot_querys: {
        aa: 1
      }
    }
  },
  mounted() {


  },
  methods: {
    // 修改是否让页面显示与隐藏的事件
    updateVisible (val) {
      this.dialogBasket = val
    },
    // 点击取消的事件
    resetPopupData () {
      //  这里可重置数据
      this.dialogBasket = false
      console.log('000,这里可重置数据')
    },
    // 点击确定的按钮
    async submitPopupData (val) {
      // this.dialogBasket = false
      console.log('111,点击确定的按钮',val)
    },
    // 关闭弹框（头部的X）
    handleClose () {
      this.dialogBasket = false
    }
  }
}
</script>

<style scoped>
.box {
  padding: 10px;
}

.card {
  margin-bottom: 10px;
}
</style>

2、引用

<template>
  <!-- 封装弹框 -->
  <div class="popup">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogBasket"
      :width="popupWidth"
      :before-close="handleClose"
    >
      <slot :slot_querys="slot_querys"></slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save(slot_querys)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogTitle: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    popupWidth: {
      type: String,
      default: '550px'
    },
    slot_querys: {
      type:[String,Array,Object]
    }
  },
  data() {
    return {
      childrenData: {},
    }
  },
  computed: {
    dialogBasket: {
      get () {
        return this.visible
      },
      set (val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerdialogBasket的值
        this.$emit('updateVisible', val)
      }
    }
  },
  mounted() {
    console.log('123',this.itemList);
  },
  methods: {
    Cancel () {
      this.$emit('resetPopupData')
    },
    Save (val) {
      this.$emit('submitPopupData',val)
    },
    handleClose (val) {
      this.$emit('handleClose',)
    }
  }
}
</script>

<style scoped>
/*.popup {*/
/*  width: 550px;*/
/*}*/
/*.el-dialog {*/
/*  z-index: 10000;*/
/*  background-color: #ffffff;*/
/*  box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);*/
/*  border-radius: 5px;*/
/*  margin-top: 10% !important;*/
/*}*/
/*.el-dialog__header {*/
/*  width: 100%;*/
/*  height: 40px;*/
/*  line-height: 38px;*/
/*  border-bottom: 1px solid #f6f7f9;*/
/*  box-sizing: border-box;*/
/*  padding: 0 20px;*/
/*  font-size: 16px;*/
/*}*/
/*.el-dialog__close.el-icon.el-icon-close {*/
/*  font-size: 20px;*/
/*  width: 17px;*/
/*  height: 17px;*/
/*}*/
/*.el-button.el-button--default {*/
/*  width: 88px;*/
/*  color: #1182fb;*/
/*  border: 1px solid #1182fb;*/
/*}*/
/*.el-button.el-button--primary {*/
/*  width: 88px;*/
/*}*/
/*.el-dialog__body {*/
/*  padding: 24px 32px;*/
/*  box-sizing: border-box;*/
/*}*/
/*.el-dialog__headerbtn {*/
/*  top: 4px;*/
/*}*/
/*.el-dialog__title {*/
/*  color: #3c4354;*/
/*  font-family: PingFangSC-Regular;*/
/*  font-size: 16px;*/
/*  line-height: 16px;*/
/*}*/
/*.el-dialog__footer {*/
/*  text-align: center;*/
/*}*/
</style>