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

菜菜籽油

已于 2024-02-10 12:37:55 修改

阅读量465

点赞数 7

文章标签： vue.js elementui 前端

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

本文链接：https://blog.csdn.net/jpqlgzpw/article/details/136090327

版权

工作需求：需要实现一个轮播图，轮播内容是不同的网站，并实现鼠标滑动时停止轮播，当鼠标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具体的使用请查看下面大佬的文档

iframe的基本介绍与使用-CSDN博客

第二步：使用elementui的<el-carousel></el-carousel>轮播组件搭配iframe实现轮播

代码如下：

   <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>

<el-carousel></el-carousel>组件的具体使用可以查看elementui官方文档

Element - The world's most popular Vue UI framework

第三步：上面已经实现可以轮播内联网页了，但是还需要监听鼠标移动事件来实现停止轮播

el-carousel组件是自带一个悬浮页面停止轮播的功能的，因此需要先重置鼠标的悬浮事件

   mounted() {
          this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠标悬浮事件 */
        
        },

然后绑定鼠标移动事件，设置定时器，每隔一段时间判断鼠标是否移动

全部代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-carousel
        :interval="15000"
        arrow="always"
        height="100vh"
        width="100%"
        ref="carousel"
        :autoplay="autoplay"
        @mousemove.native="delHandleMouseEnter"
      >
        <el-carousel-item v-for="(item,i) in list" :key="i">
          <iframe
            id="huoduan_frame"
            frameborder="0"
            scrolling="auto"
            name="main"
            :src="item"
            style="
              height: 100%;
              visibility: inherit;
              width: 100%;
              z-index: 1;
              overflow: visible;
            "
          >
          </iframe>
        </el-carousel-item>
      </el-carousel>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: function () {
          return {
            autoplay: true,
            oldTime: new Date().getTime(),
            newTime: new Date().getTime(),
            outTime: 120000, //设置超时时间： 8分钟,
            timer: null,
            list: [
              // /* 网页存放地址 */
,
            ],
          }
        },
        mounted() {
          // this.$refs.carousel.handleMouseEnter = () => {} /* 重置鼠标悬浮事件 */
          // setInterval(() => {
          //   this.OutTime() /* 每五秒判断一次鼠标是否移动 */
          // }, 5000)
        },
        created() {},
        methods: {
          // 鼠标移动事件
          delHandleMouseEnter() {
            // this.autoplay = false
            // this.$refs.carousel.handleMouseEnter =
            //   () => {} /* 重置鼠标悬浮事件 */
            // this.oldTime = new Date().getTime() /* 鼠标移动重新计算时间 */
         
          },
          OutTime() {
            // clearInterval(this.timer);
            this.newTime = new Date().getTime() //更新未进行操作的当前时间
           
            //判断是否超时不操作
            if (this.newTime - this.oldTime > this.outTime) {
              //超时后执行的操作
              this.autoplay = true
            }
          },
        },
      })
    </script>
  </body>
</html>

完结撒花~~

菜菜籽油

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
vue+ElementUi+iframe实现轮播不同的网站

第二步：使用elementui的轮播组件搭配iframe实现轮播。工作需求：需要实现一个轮播图，轮播内容是不同的网站，并实现鼠标滑动时停止轮播，当鼠标10秒内不动时继续轮播。组件的具体使用可以查看elementui官方文档。el-carousel组件是自带一个悬浮页面停止轮播的功能的，因此需要先重置鼠标的悬浮事件。第三步：上面已经实现可以轮播内联网页了，但是还需要监听鼠标移动事件来实现停止轮播。
复制链接

扫一扫