pc-component-v5/packages/modal/src/Modal.vue

<template>
  <teleport to="body">
    <div
      v-if="show"
      :transition="transition"
    >
      <div
        class="modal"
        @click.self="clickMask"
      >
        <div
          class="modal-dialog"
          :class="modalClass"
          name="dialog"
        >
          <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
              <a
                v-if="showTopRightCloseButton"
                type="button"
                class="close"
                @click="cancel"
              >x</a>
              <h4 class="modal-title">
                <slot name="header">
                  {{ title }}
                </slot>
              </h4>
            </div>
            <!--Container-->
            <div class="modal-body">
              <slot />
            </div>
            <!--Footer-->
            <div class="modal-footer">
              <button
                v-if="showCanelButton"
                type="button"
                class="btn btn-info"
                @click="cancel"
              >
                {{ cancelText }}
              </button>
              <button
                v-if="showOkButton"
                type="button"
                class="btn btn-primary"
                @click="ok"
              >
                {{ okText }}
              </button>
              <slot name="footer" />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-backdrop in" />
    </div>
  </teleport>
</template>

<script>

import ModalFix from './ModalFix.js';

export default {
  // eslint-disable-next-line
    name: 'Modal',
  props: {
    /**
     * 是否显示模态框
     */
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    small: {
      type: [Boolean, String],
      default: false,
    },
    large: {
      type: [Boolean, String],
      default: false,
    },
    full: {
      type: [Boolean, String],
      default: false,
    },
    // 为true时无法通过点击遮罩层关闭modal
    force: {
      type: Boolean,
      default: null,
    },
    // 自定义组件transition
    transition: {
      type: String,
      default: '',
    },
    // 显示确定按钮
    showOkButton: {
      type: Boolean,
      default: true,
    },
    // 显示取消按钮
    showCanelButton: {
      type: Boolean,
      default: true,
    },
    // 显示标题栏的关闭按钮
    showTopRightCloseButton: {
      type: Boolean,
      default: true,
    },
  },

  emits: ['ok', 'cancel', 'close', 'update:show'],

  data: function () {
    return {
      okText: this.$t('lang.modal.confirm'),
      cancelText: this.$t('lang.modal.cancel'),
      closeText: this.$t('lang.modal.close'),
      okClass: '',
      cancelClass: '',
      closeClass: '',
    };
  },

  computed: {
    modalClass: function () {
      return {
        'modal-lg': this.large || this.large == 'true',
        'modal-sm': this.small || this.small == 'true',
        'modal-full': this.full || this.full == 'true',
      };
    },
  },
  watch: {
    show: function (value) {
      console.log('modal watch show = ' + value);
      // 在显示时去掉body滚动条，防止出现双滚动条
      if (value) {
        if (document.body.className.indexOf('modal-open') < 0) {
          document.body.className += ' modal-open';
        }
      } else {
        this.$nextTick(function () {
          ModalFix.fix();
        });
      }
    },
  },

  created: function () {
    if (this.show) {
      if (document.body.className.indexOf('modal-open') < 0) {
        document.body.className += ' modal-open';
      }
    }
  },


  methods: {
    ok: function () {
      this.$emit('ok');
      this.$emit('update:show', false);
      this.$nextTick(function () {
        ModalFix.fix();
      });
    },

    cancel: function () {
      this.$emit('cancel');
      this.$emit('update:show', false);
      this.$nextTick(function () {
        ModalFix.fix();
      });
    },

    close: function () {
      this.$emit('close');
      this.$emit('update:show', false);
      this.$nextTick(function () {
        ModalFix.fix();
      });
    },

    // 点击遮罩层
    clickMask: function () {
      if (!this.force) {
        this.cancel();
        this.$nextTick(function () {
          ModalFix.fix();
        });
      }
    },
  },
};
</script>


<style scoped>
.modal {
    display: block;
}
.modal-transition {
    transition: all 0.6s ease;
}
.modal-leave {
    /* 样式没什么用，但可以让根标签的transitionEnd生效，以去掉modal-leave */
    border-radius: 1px !important;
}
.modal-transition .modal-dialog,
.modal-transition .modal-backdrop {
    transition: all 0.5s ease;
}
.modal-enter .modal-dialog,
.modal-leave .modal-dialog {
    opacity: 0;
    transform: translateY(-30%);
}

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

.modal-full {
    width: 95%;
}

.modal-lg {
    width: 75%;
}

.modal-sm {
    width: 50%;
}
</style>