如何在vue中使用iframe（操作节点）+不操作节点只是用VUE

woshi759956817

已于 2022-03-17 16:53:24 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-03-17 13:52:38 首次发布

本文链接：https://blog.csdn.net/woshi759956817/article/details/123544565

本文介绍了如何在Vue项目中使用iframe，并对比了直接操作DOM与遵循MVVM架构的区别。通过示例展示了在HTML和JS中设置监听播放区域的方法，强调了在Vue中避免直接操作DOM的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 操作DOM 针对播放区域很多情况

点击播放区域后在点击监控即可呈现播放区域
在这里插入图片描述

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号界面