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

更新时间：2024年02月11日 09:12:07 作者：JPQLGZPW

需要实现一个轮播图,轮播内容是不同的网站,并实现鼠标滑动时停止轮播,当鼠标10秒内不动时继续轮播,所以本文给大家介绍了用vue+ElementUi+iframe实现轮播不同的网站,需要的朋友可以参考下

工作需求：需要实现一个轮播图，轮播内容是不同的网站，并实现鼠标滑动时停止轮播，当鼠标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的基本介绍与使用

第二步：使用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" rel="external nofollow" 
    />
    <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>

完结撒花~~

以上就是vue+ElementUi+iframe实现轮播不同的网站的详细内容，更多关于vue+ElementUi+iframe轮播网站的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue中如何自定义右键菜单详解
这篇文章主要给大家介绍了关于vue中如何自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Vue项目如何实现切换主题色思路
这篇文章主要介绍了Vue项目如何实现切换主题色思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue 里面的 $forceUpdate() 强制实例重新渲染操作
这篇文章主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue3为什么要用proxy替代defineProperty
这篇文章主要介绍了vue3为什么要用proxy替代defineProperty,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
在vue3项目中实现国际化的代码示例
国际化就是指在一个项目中，项目中的语言可以进行切换（中英文切换），那么在实际项目中是如何实现的呢，本文就给大家详细的介绍实现方法,需要的朋友可以参考下
2023-07-07
如何在Vue3中使用视频库Video.js实现视频播放功能
在Vue3项目中集成Video.js库,可以创建强大的视频播放功能,这篇文章主要介绍了如何在Vue3中使用视频库Video.js实现视频播放功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
vue1.0和vue2.0的watch监听事件写法详解
今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue中组件样式冲突的问题解决
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成组件之间的样式冲突问题,本文就来介绍一下如何解决此问题,感兴趣的可以了解一下
2023-12-12
vue3 ref获取不到子组件的解决方法
在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问其内部事件,本文给大家介绍了vue3 ref获取不到子组件的解决方法,需要的朋友可以参考下
2024-06-06
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下
2023-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具