vue自定义弹出框，点击全屏显示

自定义弹出框

• title: 弹出框标题
• fullScreenIcon: { // 是否显示全屏按钮
• btnShow: { // 是否显示操作按钮
• closeBtn: { // 关闭按钮-文字
• submitBtn: { // 确定按钮-文字
• popWidth: { // 弹出层宽度

使用方法

<popContent
  v-if="dialogVisibleScore"
  :pop-width="1000"
  :full-screen-icon="true"
  :btn-show="false"
  title="详情"
  @closePop="dialogVisibleScore = false">
  <div>内容区div>
popContent>

popContent.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="stylus" scoped>
  $primaryColor = #17caaa

  .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: $primaryColor;
          }
        }
        .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>