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

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: '',
curVideoID: '',
curVideoBoxID: '',
videoSrc: '#',
svgFrame: null,
# 方法
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
})
}
},
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
box.appendChild(iframe)
this.svgFrame = document.getElementById(ID)
},
closeIFrame(boxID) {
let box = document.getElementById(boxID)
box.innerHTML = ''
}