el-dialog组件封装-El-Dialog---vue

废话不说了，直接上干货！（亲测好用）

**

基于elemenet el-dialog封装 vue 封装弹窗组件## 标题

1，封装Dialog.vue文件

**

<template>
  <div class="base-dialog">
    <el-dialog :type="type"
               :width="width"
               :custom-class="customClass"
               :fullscreen="fullscreen"
               :title="title"
               :close-on-click-modal="closeOnClickModal"
               :append-to-body="appendToBody"
               :visible.sync="visible"
               :before-close="beforeClose"
               @closed="closed">
      <slot name="body" />
      <div v-if="footer"
           slot="footer"
           class="dialog-footer">
        <slot name="footer" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BaseDialog",
  props: {
    appendToBody: { type: Boolean, default: false }, // 是否嵌套
    closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
    footer: { type: Boolean, default: true }, // 是否显示底部
    title: String, // 对话框title
    type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
    width: String, // 对话框宽度800px 或 50%
    beforeClose: Function// 关闭回调函数
  },
  data() {
    return {
      visible: false,
      fullscreen: false
    };
  },
  computed: {
    customClass() {
      let className = ''
      switch (this.type) {
        case 'form':
          className = 'base-dialog-form'
          break
        case 'table':
          className = 'base-dialog-table'
          break
        case 'fullscreen':
          className = 'base-dialog-fullscreen'
          break
      }
      return className
    }
  },
  created() {
    this.type === 'fullscreen' && (this.fullscreen = true)
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    closed() {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss">
.base-dialog {
  text-align: left;
  .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog {
      display: flex;
      flex-direction: column;
      .el-dialog__header {
        height: 40px;
        line-height: 40px;
        padding: 0px 20px;
        background: #eff3fa;
        color: #fff;
        border-bottom: 1px solid #dcdfe6;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        .el-dialog__title {
          font-size: 16px;
          // font-weight: bold;
        }
        .el-dialog__headerbtn {
          top: 12px;
        }
      }
      .el-dialog__body {
        flex: 1;
        overflow: auto;
        padding: 20px;
      }
      .el-dialog__footer {
        text-align: center;
        border-top: 1px solid #eee;
        padding: 8px 20px;
        background: #fefefe;
      }
    }
    .base-dialog-form {
      height: auto;
      margin-top: 15vh !important;
      .el-dialog__body {
        padding: 20px 20px 0 20px;
      }
      .el-dialog__footer {
        border: none;
        padding: 10px 20px 20px;
        background: none;
      }
      .custom-table {
        // 取消表格下边线
        tbody tr:last-child td {
          border-bottom: none !important;
        }
      }
    }
    .base-dialog-table {
      height: 90vh;
      margin-top: 5vh !important;
      .el-dialog__body {

      }
    }
    .base-dialog-fullscreen {
      height: 100vh;
      width: 100vw;
      .el-dialog__body {
        padding: 10px;
      }
    }
  }
}
</style>

**

2.下边是如何调用，懒人版本，直接用就行，注意看内部注释哦

！**

//组件调用
 <dialog-a ref="dialogaaa" />
//组件引用
import DialogA from './Dialog.vue'
//注册组件
components: {
    DialogA
  },
//打开Dialog
 this.$refs.dialogaaa.open()

//组件内部定义逻辑，注意dialog隐藏显示是show不是if,所以初次加载逻辑不能写在created里边
<!--  Dialog-->
<template>
  <base-dialog ref="dialog"
               width="800px"
               type="form"
               :fullscreen="true"
               :title="title"
               footer
               :before-close="close"
               @closed="closed">
    <template slot="body">
      <div>tree</div>
    </template>
    <template slot="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="close()">取消</el-button>
    </template>
  </base-dialog>
</template>

<script>
import BaseDialog from '@/components/BaseDialog.vue'
export default {
  components: {
    BaseDialog
  },
  data() {
    return {
      title: ''
    }
  },
  computed: {

  },
  created() {},
  methods: {
    open() {
      this.$refs.dialog.open()
      this.title = '新增XXXXXX'
    },
    close() {
      this.$refs.dialog.close()
    },
    closed() {},
    save() {}
  }
}
</script>
<style lang='scss' scoped>

</style>

咋样，跟着我，教你成为一名合格得CV大师！记得点赞关注！当然了，这也是我日常开发的积累，作为我得组件库，方便我自用，以后也会不断的迭代一些组件以及好用的东西！