element ui dialog 弹框 二次封装

下次会为大家更新form表单的封装，table，pagination,form的封装使用后期能更好的维护代码

新建一个dialog文件，下面是封装内容

<template>
  <div>
    <el-dialog
      ref="currentDialog"
      v-bind="$props"
      :class="`dialog-${size}`"
      :close-on-click-modal="closeOnClickModal"
      :lock-scroll="lockScroll"
      :modal-append-to-body="modalAppendToBody"
      @close="onClose"
    >
      <slot />
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Dialog } from "element-ui";
export default {
  props: {
    ...Dialog.props,
    visible: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      //normal, big, mini
      default: ""
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onClose() {
      this.$emit("close");
    }
  }
};
</script>

这里我做了全局引入，小伙伴不明白的话，可以去借鉴另一篇博客table表格二次封装的写法，下面是页面实现

新建一个DialogCreateTerm.vue  使用封装的dialog弹框 这里把弹框和内容又分开来写

<template>
  <j-el-dialog :title="dialogTitle" :visible.sync="value" @close="onClose" width="40%">
     //弹框填充内容区域
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="save()" :loading="btnLoading"> 确 定 </el-button>
    </div>
  </j-el-dialog>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods:{
    onClose(){
       // 关闭弹框，给父组件一个事件
       this.$emit('onClose')
    }
    save(){
       this.onClose();
    }
  }
};
</script>

新建一个index.vue ，引用DialogCreateTerm.vue弹框

<template>
  <div class="page">
    <div class="operation">
      <el-button type="primary" @click="handleCreate">新增</el-button>
    </div>
    <DialogCreateTerm
      v-model="dialogTermvisible"
      :dialogTitle="dialogTitle"
      @onClose="onClose"
    />
  </div>
</template>
<script>
import DialogCreateTerm from "./DialogCreateTerm.vue";
export default {
  components: { DialogCreateTerm},
  data() {
    return {
      dialogTermvisible: false,
    };
  },
  methods: {
    handleCreate() {
      this.dialogTitle = "新增学期";
      this.dialogTermvisible = true;
    },
    onClose() {
      this.dialogTermvisible = false;
    },
  },
};
</script>