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具体的使用请查看下面大佬的文档
第二步：使用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 二维码长按保存和复制内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
一步一步学Vue，这篇文章为大家分享了第二篇前端主流框架vue学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue 如何使用递归组件，帮助大家更好的理解和使用vue，完成开发需求，感兴趣的朋友可以了解下2020-10-10
这篇文章主要为大家介绍了vue中百度地图定位及附近搜索功能使用步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下2021-09-09
这篇文章主要为大家详细介绍了vue+elementui实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本篇文章主要介绍了详解webpack编译多页面vue项目的配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vue 虚拟列表的实现示例，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了Vue工程模板文件 webpack打包配置,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了vue中如何获取本地IP地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论