封装 element 的el-dialog弹窗组件

淡淡的烟草味﹌ 2022-10-05 10:54 303阅读 0赞

# [封装 element 的el-dialog弹窗组件][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) 通知父组件修改值。

[element _el-dialog]: https://www.cnblogs.com/keyi666/p/13203506.html