需求：点击播放区域后在点击监控即可呈现播放区域

HTML

<!-- 四屏 -->
          <div v-if="video == 4" class="content">
            <div
              class="contvidef"
              :style="{ height: windowHeight / 2.06 + 'px', width: parseInt(windowWidth / 2.05) + 'px' }"
              v-for="(item, index) in video"
              :key="index"
            >
              <div v-if="videotwo == `four${index}`" class="text">{{ index + 1 }}</div>
              <div class="video">{{ noVideo }}</div>
              <div
                :id="`iframebox${index}`"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
                @click="video2(`four${index}`, `iframebox${index}`)"
              ></div>
              <i
                style="
                  position: absolute;
                  top: -7px;
                  right: -23px;
                  color: red;
                  font-size: 15px;
                  width: 30px;
                  height: 30px;
                "
                class="el-icon-close"
                @click="closeIFrame(`iframebox${index}`)"
              ></i>
            </div>
          </div>```

# JS
data中定义的属性
 windowWidth: document.documentElement.clientWidth - 300, //实时屏幕宽度
 windowHeight: document.documentElement.clientHeight - 25, //实时屏幕高度
 video: 4, //初始化显示界面
 videotwo: '', //初始化4号界面状态
 curVideoID: '', //当前点击视频iframeID
 curVideoBoxID: '', //当前点击盒子ID
 videoSrc: '#', //点击节点当前视频链接
 svgFrame: null, //当前点击
 # 方法
  // 4号界面
    video2(ID, boxID) {
      this.videotwo = ID
      this.curVideoID = ID
      this.curVideoBoxID = boxID
    },
    // 点击属性菜单节点
    handleNodeClick(data) {
      console.log(data)
      if (data.isOnLine && data.children == null) {
        this.$message({
          message: '该视频不在线',
          type: 'warning'
        })
        return
      }
      //必须是点击完播放区域在点击视频才能播放
      if (data.children == null && this.curVideoID !== '' && this.curVideoBoxID !== '') {
        this.$nextTick(() => {
          this.videoSrc = data.iframeUrl
          this.iframeFn(this.curVideoID, this.curVideoBoxID)
          this.svgFrame.src = data.iframeUrl
        })
      }
    },
    // 新建iframe
    iframeFn(ID, boxID) {
      let box = document.getElementById(boxID)
      let curBoxIframe = document.getElementById(ID)
      // // 检查是否存在
      if (curBoxIframe) {
        curBoxIframe.parentNode.removeChild(curBoxIframe)
      }
      // 创建新的显示窗口
      let iframe = document.createElement('iframe')
      //设置属性
      iframe.width = '100%'
      iframe.height = '100%'
      iframe.id = ID
      iframe.frameborder = 0
      iframe.allowFullscreen = true
      //添加到dom
      box.appendChild(iframe)
      this.svgFrame = document.getElementById(ID)
    },
    // 移除iframe
    closeIFrame(boxID) {
      let box = document.getElementById(boxID)
      box.innerHTML = ''
    }