vue+ElementUi+iframe实现轮播不同的网站

原创

已于 2024-02-10 12:37:55 修改 · 811 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2024-02-10 12:34:37 首次发布

工作需求：需要实现一个轮播图，轮播内容是不同的网站，并实现鼠标滑动时停止轮播，当鼠标10秒内不动时继续轮播

第一步：实现不同的网页嵌入同一个页面

应用的是iframe这个技术

代码如下：

    <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="http://baidu" src：指定内联网页的地址。
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>

把需要内联的网页地址写进src就行，iframe具体的使用请查看下面大佬的文档