可控模态框的实现 ¶

<template>
  <h1>Hello!</h1>
</template>
复制成功
复制

<template>
  <div class="dialog-wrapper">
    <div class="dialog-box"></div>
  </div>
</template>

<script>
export default {}
</script>
<style lang="less" scoped>
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.dialog-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.dialog-box {
  width: 400px;
  height: 400px;
  background: #fff;
}
</style>
复制成功
复制

<template>
  <div>
    <button @click="handleShow">显示</button>
    <Dialog v-model="show" />
  </div>
</template>

<script>
import Dialog from './index'
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    handleShow() {
      this.show = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
复制成功
复制

<!-- <Dialog v-model="show" /> -->
<Dialog :visible="show" @close="show = false" />
复制成功
复制

<template>
  <div>
    <button @click="handleShow">显示{{ show }}</button>
    <div v-for="i in 100" :key="i">{{ i }}</div>
    <!-- <Dialog v-model="show" /> -->
    <Dialog :visible="show" @close="show = false" />
  </div>
</template>
复制成功
复制

<template>
  <div class="dialog-wrapper" v-show="visible" @click.self="handleMask">
    <transition :name="transitionName">
      <div class="dialog-box" v-show="visible">
        <slot name="wrapper">
          <div class="dialog-inner">
            <slot name="header">
              <div class="header">
                <span v-if="title">{{ title }}</span>
                <button @click="handleClose">关闭{{ visible }}</button>
              </div>
            </slot>
            <slot name="body">
              <div class="body">
                <slot />
              </div>
            </slot>
            <slot name="footer">
              <div class="footer">
                <button @click="handleCancel">取消</button>
                <button @click="handleOk">确定</button>
              </div>
            </slot>
          </div>
        </slot>
      </div>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
function hasScrollbar() {
  return document.body.scrollHeight > window.innerHeight
}
function getScrollbarWidth() {
  var scrollDiv = document.createElement('div')
  scrollDiv.style.cssText =
    'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;'
  document.body.appendChild(scrollDiv)
  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
  document.body.removeChild(scrollDiv)

  return scrollbarWidth
}
export default {
  props: {
    visible: Boolean,
    transitionName: {
      type: String,
      default: 'fade',
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
    escClosable: {
      type: Boolean,
      default: true,
    },
    title: String,
  },
  model: {
    prop: 'visible',
    event: 'change',
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let sw = getScrollbarWidth()
          document.getElementsByTagName('body')[0].style.overflow = 'hidden'
          if (hasScrollbar()) {
            document.getElementsByTagName('body')[0].style.marginRight =
              sw + 'px'
          }
        } else {
          document.getElementsByTagName('body')[0].style.overflow = 'auto'
          if (hasScrollbar()) {
            document.getElementsByTagName('body')[0].style.marginRight =
              0 + 'px'
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    document.addEventListener('keyup', (e) => {
      if (e.keyCode === 27 && this.escClosable) {
        this.handleClose()
      }
    })
  },
  methods: {
    handleClose() {
      this.$emit('change', false)
      this.$emit('close', false)
    },
    handleMask() {
      if (this.maskClosable) {
        this.handleClose()
      }
    },
    handleCancel(e) {
      this.$emit('handle-cancel', e)
      this.handleClose()
    },
    handleOk(e) {
      this.$emit('handle-ok', e)
    },
  },
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.dialog-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.dialog-box {
  width: 400px;
  min-height: 100px;
  display: flex;
  .dialog-inner {
    background: #fff;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .header {
      padding: 16px 24px;
      color: rgba(0, 0, 0, 0.65);
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      border-radius: 4px 4px 0 0;
      display: flex;
      justify-content: space-between;
    }
    .body {
      padding: 24px;
      font-size: 14px;
      line-height: 1.5;
      word-wrap: break-word;
    }
    .footer {
      padding: 10px 16px;
      text-align: right;
      background: transparent;
      border-top: 1px solid #e8e8e8;
      border-radius: 0 0 4px 4px;
    }
  }
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
</style>
复制成功
复制