vue+ElementUi+iframe实现轮播不同的网站
作者：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轮播网站的资料请关注脚本之家其它相关文章！