Vue+elementUI走马灯实现界面3分钟无点击操作出现全屏banner

Banner.vue组件

<!-- banner --><div id="mask"><div class="banner"><el-carousel :interval="5000" indicator-position="none"><el-carousel-item v-for="(item, index) in carouselList" :key="index"><img :src="item.path" alt=""></el-carousel-item></el-carousel></div></div>

 data () {return {carouselList: [{path: require('../assets/banner1.jpg')},{path: require('../assets/banner2.jpg')},{path: require('../assets/banner3.jpg')}]}}

<style scoped>#mask {width: 100%;height: 100%;position: absolute;top: 0;z-index: 101;}.banner /deep/ .el-carousel__container {height: 100% !important;}.banner /deep/ .el-carousel__container .el-carousel__arrow {display: none;}.banner img {display: inline-block;height: auto;max-width: 100%;}.banner, .banner div {width: 1280px;height: 1024px;}/* 这个样式可能还有点问题 App.vue里也写了些全局样式 我没有粘过来*/</style>

需要加全屏bannner (屏保) 的页面
Home.vue

import Banner from './Banner'

components: {'u-banner': Banner},

<div @click="startsCreenProtection"><u-banner v-if="bannerShow" @click.native="hideBanner"></u-banner>
</div>

data () {return {bannerShow: false,timer: null,time: 0,}},

 mounted() {         this.setTimer()},

 methods: {     startsCreenProtection() {this.time = 0;},hideBanner() {this.bannerShow = falsethis.time = 0this.setTimer()},// 设置计时器方法setTimer() {clearTimeout(this.timer)this.timer = nullthis.timer = setTimeout(() => {if ( this.time < 180) {this.time ++this.setTimer()} else {this.bannerShow = truethis.time = 0}}, 1000)},}

大概就是这么个思路
（1）先用element-UI里的el-carousel整个全屏的banner图作为屏保
（2）Home页面一进来就走定时器每过1秒++ 180秒后就把banner 的v-if = true
（3）Home最外层 div 加个点击事件如果点击了鼠标就将banner 的v-if = false
time置为0 重新走定时器

Vue+elementUI走马灯实现界面3分钟无点击操作出现全屏banner相关推荐

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码
用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码 <template><el-carousel ...
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用,实现了发送消息+表情(动图gif).图片/视频预览.右键长按菜单.红包/朋 ...
android教程1009无标题,Android ActionBarActivity设置全屏无标题实现方法总结_Android_脚本之家...
Android ActionBarActivity设置全屏无标题实现方法总结前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟 ...
element走马灯自动_详细element-ui的走马灯carousel轻松实现自适应全屏banner详细过程...
div部分 CSS部分 .bannerImg{ width: 100%; height: inherit; min-height: 600px; min-width: 1400px; } vue.JS ...
Vue+Element-ui实例_使用flexslider插件设计横向时间线
下面是做了一个类似时间线(history事件线)的页面,主要是记录一下log,或者history的操作记录. 主要难点: (1)一般的插件时间线例如(elementUI中的el-timeline)就是 ...
vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
Android fragment 中控制某一个界面全屏与否
项目中,只允许一个界面在横屏的时候,显示是全屏的,竖屏切换回来的时候又需要显示状态栏,所以需要监听横竖屏的状态,还要修改状态栏的隐藏与显示,如下代码: /*** 添加横竖屏监听,隐藏图形的菜单控件,2 ...
Element-ui配合Vue实现走马灯图片自适应效果
elementUI配合Vue实现走马灯图片自适应效果(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然 ...

Vue+elementUI走马灯实现界面3分钟无点击操作出现全屏banner

Vue+elementUI走马灯实现界面3分钟无点击操作出现全屏banner相关推荐

最新文章

热门文章