Vue封装弹窗

1.创建 EXDialog.vue 文件 (代码很简单 没有注释 如有不懂 评论就好)

<template>
  <transition name="fade">
    <div :style="style" class="ex-dialog__wrapper" v-show="visible">
      <div>
        <div>
          <div class="ex-height-info"><span>{{ title }}</span>
            <div @click="$emit('update:visible',false)">X</div>
          </div>
        </div>
        <div class="color_body">
          <slot></slot>
        </div>
      </div>

    </div>
  </transition>
</template>

<script>
import logDing from "@/components/common/Dialog/ex_dialog";
export default {
  name: "EXDialog",
  props: {
    width: String,
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    "visible" : function (val) {
      if(val) {
        // 控制背景的显示喝隐藏
        logDing(this)
      }
    }
  },
  computed: {
    style() {
      let style = {};
      if (this.width) {
        style.width = this.width;
      }
      return style;
    }
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
  opacity: 0;
}

.ex-dialog__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;

  .ex-height-info {
    height: 48px;
    line-height: 48px;
    background: linear-gradient(181deg, #63A2FB, #68A1F3, #3A79D3);
    text-align: center;
    position: relative;

    span {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
    }

    div {
      position: absolute;
      right: 20px;
      top: 0;
      cursor: pointer;
      font-size: 16px;
      color: #fff;
      font-weight: bold;
    }
  }
}

.color_body {
  background: #fff;
  border: 1px solid #DEDEDE;
}
</style>

2. 创建ex_dialog.js 文件

function logDing(_this) {
  let body = document.querySelector("body")
  let div = document.createElement('div')
  div.style.position = "fixed"
  div.style.width = "100%"
  div.style.height = "100%"
  div.style.background = "#000"
  div.style.opacity = '0.5'
  div.style.top = '0'
  div.style.zIndex = '10'
  div.addEventListener("click",  () => {
    _this.$emit('update:visible',false)
    div.remove()
  }, false)
  body.append(div)
}

export default logDing

3.调用