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轮播网站的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了mpvue+vant app搭建微信小程序的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下2019-01-01
上拉加载更多的分页功能大家应该都见过或者使用过了吧,那么有多少同学自己实现过吗,本文我们来简单实现一个上拉加载更多分页组件吧2024-11-11
这篇文章主要为大家详细介绍了vue组件开发之tab切换组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了Vue移动端下拉刷新组件的使用教程，每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突，这就很难受，这篇文章将解决它2023-04-04
最近尝试上手Vue3+TS+Vite,对比起Vue2有些不适应,但还是真香,下面这篇文章主要给大家介绍了关于vue3+ts+vite2项目的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue实现吸壁悬浮球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了Vue组件之间的通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue-class-setup 编写 class 风格组合式API
这篇文章主要为大家介绍了vue-class-setup 编写 class 风格组合式API，支持Vue2和Vue3，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论