vue 自定义弹窗的使用

这个文章 完全是写给自己用，方便自己后面开发，大部分借鉴他人的demo。参考地址：https://blog.csdn.net/qq_32442967/article/details/107343611

第一步：在文件夹 components里面新建一个文件夹 表示控件名称 CommentDialog，我的名字，然后在这个文件夹里面新建一个index.vue文件

第二步：
index.vue 文件的内容
<template>
  <div class="pop-container">
    <div ref="popRef" :style="{width: popWidth + 'px'}" :class="{'maxHeight7': !isFull}" class="container">
      <div class="top">
        <h3>{{ title }}</h3>
        <div>
          <i v-if="fullScreenIcon" class="el-icon-full-screen el-icon-tools" @click="isFullScreen"/>
          <i class="el-icon-close el-icon-tools" @click="closePop"/>
        </div>
      </div>
      <div :class="{'maxHeight5': !isFull}" class="main-container">
        <slot/>
        <div v-if="btnShow" class="btn-content">
          <el-button size="small" @click="closePop">{{ closeBtn }}</el-button>
          <el-button size="small" type="primary" @click="submitPop">{{ submitBtn }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'popContent',
    props: {
      title: {
        type: String,
        default: ''
      },
      fullScreenIcon: { // 是否显示按钮
        type: Boolean,
        default: false
      },
      btnShow: { // 是否显示按钮
        type: Boolean,
        default: true
      },
      closeBtn: { // 关闭按钮-文字
        type: String,
        default: '取消'
      },
      submitBtn: { // 确定按钮-文字
        type: String,
        default: '确定'
      },
      popWidth: { // 弹出层宽度
        type: Number,
        default: 400
      }
    },
    data() {
      return {
        isFull: false
      }
    },
    created() {
      const that = this
      window.onresize = function() {
        if (!checkFull()) {
          // 要执行的动作
          that.isFull = false
        }
      }
      function checkFull() {
        var isFull =
          document.fullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement
        // to fix : false || undefined == undefined
        if (isFull === undefined) isFull = false
        return isFull
      }
    },
    methods: {
      closePop() {
        this.$emit('closePop')
      },
      submitPop() {
        this.$emit('submitPop')
      },
      isFullScreen() {
        if (!this.isFull) {
          this.$refs.popRef.requestFullscreen()
        } else {
          document.exitFullscreen()
        }
        this.isFull = !this.isFull
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pop-container {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    overflow: auto;
    z-index: 2000;
    .container{
      background-color: #FFFFFF;
      border-radius: 4px;
      overflow: auto;
      .top{
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EEEFF1;
        h3{
          font-size: 14px;
          color: #283550;
          padding-left: 20px;
          position: relative;
          &:after{
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            display: block;
            content: '';
            background: #17caaa;
          }
        }
        .el-icon-tools{
          color: #AFAFAF;
          font-size: 20px;
          font-weight: bold;
          cursor: pointer;
          margin-right: 16px;
        }
      }
      .main-container{
        padding: 15px 20px;
        overflow: auto;
        .btn-content{
          float: right;
          margin-top: 15px
        }
      }
    }
  }
  .maxHeight7{
    max-height: 700px
  }
  .maxHeight5{
    max-height: 500px
  }
</style>
<!--
弹出框地址 参考地址
https://blog.csdn.net/qq_32442967/article/details/107343611
-->

第三步：引用
main.js文件中 

// 全局组件挂载
import CommentDialog from "@/components/CommentDialog";
Vue.component('CommentDialog', CommentDialog)

布局文件的使用
  <CommentDialog
      v-if="dialogVisibleScore"
      :pop-width="1000"
      :full-screen-icon="true"
      :btn-show="false"
      title="动态（序号）评论管理"
      @closePop="dialogVisibleScore = false">
      <div>
        完成
      </div>
    </CommentDialog>