封裝 element 的el-dialog彈窗組件

封裝組件

<template>
  <el-dialog
    custom-class="uq-dialog-custom"
    :title="$slots.title ? '' : title"
    :visible.sync="visible"
    :width="width"
    :append-to-body="appendToBody"
    :modal="modal"
    :close-on-click-modal="false"
    :fullscreen="fullscreen"
    :destroy-on-close="destroyOnClose"
    :modal-append-to-body="modalAppendToBody"
    :before-close="handleClose"
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <template v-if="$slots.title">
      <span slot="title">
        <slot name="title" />
      </span>
    </template>
    <slot />
    <span slot="footer" class="dialog-footer">
      <slot name="footer" />
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UqDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    appendToBody: {
      // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必須指定該屬性並賦值為 true
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      // 遮罩層是否插入至 body 元素上，若為 false，則遮罩層會插入至 Dialog 的父元素上
      type: Boolean,
      default: true
    },
    modal: {
      // 是否需要遮罩層
      type: Boolean,
      default: true
    },
    fullscreen: {
      // 是否全屏
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      // 關閉時銷毀 Dialog 中的元素
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '30%'
    }
  },
  computed: {
    visible: {
      get() {
        return this.show
      },
      set(val) {
        console.log(val)
        this.$emit('update:show', val) // visible 改變的時候通知父組件
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClose(done) {
      // 關閉前回調
      console.log('beforeClose')
      this.$emit('beforeClose')
      done()
    },
    open() {
      // Dialog 打開的回調
      this.$emit('open')
    },
    opened() {
      // Dialog 打開動畫結束時的回調
      this.$emit('opened')
    },
    close() {
      // Dialog 關閉的回調
      this.$emit('close')
      console.log('close')
    },
    closed() {
      // Dialog 關閉動畫結束時的回調
      this.$emit('closed')
      console.log('closed')
    }
  }
}
</script>

<style scoped lang="scss">
.uq-dialog-custom{
  .el-dialog__header{

  }
}
</style>

使用組件

<template>
    <uq-dialog :show.sync="activePopShow">
      <span>你好</span>
      <div slot="title">這是title</div>
      <div slot="footer">這是底部</div>
    </uq-dialog>
</template>
<script>
data() {
    return {
      activePopShow: false
    }
  },
methods: {
    addActive(item, flag) {
      this.activePopShow = true
    }
  }
</script>

注意：不直接使用 父組件 傳過來的show ,而是通過計算屬性使用，同時 使用  this.$emit('update:show', val) 通知父組件修改值。

全屏