oa-system/src/components/template/dialog.vue

<template>
    <transition name="modal">
        <div v-if="show" class="modal" :style="modalStyle">
            <div class="modal-overlay" @click="close"></div>
            <div class="modal-content" :style="modalcontentStyle">
                <div class="modal-header">
                    <div>
                        <slot name="title">
                            <span class="titleSpan">{{ title }}</span>
                        </slot>
                    </div>
                    <div>
                        <i class="el-icon-close" @click="close"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <slot name="content"></slot>
                </div>
                <div class="modal-footer" :class="{ 'sticky-footer': stickyFooter }">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
</transition>
</template>
  
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        required: true
      },
      restrictTo: {
        type: String,
        default: ''
      },
      title: {
            type: String,
            default: '弹层标题'
      },
      width: {
            type: [String, Number],
            default: 'auto'
      },
      height: {
            type: [String, Number],
            default: 'auto'
      },
      stickyFooter: {
        type: Boolean,
        default: true
     }
    },
    computed: {
      modalStyle() {

        if (this.restrictTo) {
          const el = document.querySelector(this.restrictTo);
          if (el) {
            return {
              position: 'absolute',
              top: `${el.offsetTop}px`,
              left: `${el.offsetLeft}px`,
              width: `${el.offsetWidth}px`,
              height: `${el.offsetHeight}px`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            };
          }
        }
        return {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        };
      },
      modalcontentStyle(){
        const style = {};
        if (this.width !== 'auto') {
            style.width = this.width + 'px';
        }

        if (this.height !== 'auto') {
            style.height = this.height + 'px';
        }

        return style;
      }
    },
    methods: {
      close() {
        this.$emit('close');
      }
    },
    mounted() {
        document.body.style.overflow = 'hidden';
    },
  }
</script>
  
<style scoped>
  .modal {
    z-index: 99;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    background-color: #fff;
    padding: 20px;
    z-index: 999;
    BORDER-RADIUS: 10px;
    position: relative;
  }

  .modal-body {
    margin-bottom: 20px;
    font-size: 15px;
  }

.modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-header{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.sticky-footer {
  position: absolute;
  bottom: 20px;
  right: 30px;
}

.titleSpan{
    font-size: 18px;
    color: #303133;
    
}

/* 过渡效果 */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.25s;
}

.modal-enter,
.modal-leave-to {
  opacity: 0;
}

</style>