vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
类别:编程学习 浏览量:741
时间:2021-10-03 01:21:52 vue左右滑屏
vue中实现全屏以及对退出全屏的监听目录
- 前言:
- 实现步骤:
- 完整源码:
- 更多资料:
vue中实现默认进来页面,某个li全屏,并监听退出全屏的次数,当退出全屏次数达到5的时候跳转到别的页面。
实现步骤:1、页面上在你想要的容器上加上id = ‘con_lf_top_li',再给他加个动态class名,加上提示和点击进入全屏按钮
<template> <el-card shadow="never" class="examining" v-loading.fullscreen.lock="loading" id="con_lf_top_li" :class="{'isScreen':!fullscreen}" > <p style="color:red;">*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试</p> <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全屏</el-button> ...其他内容
2、css部分,全屏后的部分需要单独加样式
.isScreen{ height:100vh!important; overflow-y: auto; }
3、js部分
data:
fullscreen:false,//是否全屏 goCount:0 //退出第几次
mounted初始化调用
mounted() { this.initScreen() }
methods定义方法:
//初始化全屏方法 initScreen(){ this.goCount = 0 this.screen() //打开全屏 window.addEventListener('keydown', function(event) { //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏 const e = event || window.event if (e && e.keyCode === 122) { e.preventDefault() } }) document.addEventListener('fullscreenchange', v => { if(this.fullscreen == true){ this.fullscreen = false }else{ this.goCount++ // this.$message.info('当前是退出第'+this.goCount+'次') console.log('当前是退出第'+this.goCount+'次') this.fullscreen = true if(this.goCount == 5){ this.goBack() } } }) },
1、页面: <el-card id="con_lf_top_li" :class="{'isScreen':!fullscreen}" > <p style="color:red;">*温馨提示:请在全屏下进行考试,退出全屏5次以后将禁止考试</p> <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全屏</el-button> ... 2、data: fullscreen:false,//是否全屏 goCount:0 //退出第几次 3、mounted: this.initScreen() 4、methods: //初始化全屏方法 initScreen(){ this.goCount = 0 this.screen() //打开全屏 window.addEventListener('keydown', function(event) { //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏 const e = event || window.event if (e && e.keyCode === 122) { e.preventDefault() } }) document.addEventListener('fullscreenchange', v => { if(this.fullscreen == true){ this.fullscreen = false }else{ this.goCount++ // 注意这里的事件都会触发两次 console.log('当前是退出第'+this.goCount+'次') this.fullscreen = true if(this.goCount == 5){ this.goBack() } } }) }, //全屏方法 screen(){ //设置后就是id==con_lf_top_li 的容器全屏 let element = document.getElementById('con_lf_top_li'); if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; }, //退出全屏方法 goBack(){ //111111111111111111111111111111111111111 this.$message.error('您已退出全屏5次,当前考试已经结束') this.$router.go(-1) },
https://blog.csdn.net/qq_41619796/article/details/104751814
https://blog.csdn.net/wangsiyisiyi/article/details/117086453
到此这篇关于vue中实现全屏以及对退出全屏的监听的文章就介绍到这了,更多相关vue中实现全屏以及对退出全屏的监听内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue加载html5动画(vue实现旋转木马动画)
- vuevlog制作软件(Vue实现Dialog封装)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue指令使用技巧(Vue指令工作原理实现方法)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue动态列表布局(vue项目实现左滑删除功能完整代码)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
- 秦海璐一袭旗袍惹人倾心,将高级与淡雅展现的游刃有余(秦海璐一袭旗袍惹人倾心)
- 门外之见 海蛎子味 的表演,能走多远(门外之见海蛎子味)
- 三部冷门谍战剧,第一部2014年拍摄,至今还未播出(三部冷门谍战剧)
热门推荐
- mysql缓存和redis查询效率(浅谈MySQL与redis缓存的同步方案)
- pythonflask系列教程(Python安装Flask环境及简单应用示例)
- python多线程有两个参数怎么传(python从子线程中获得返回值的方法)
- nginx给需要转发的链接添加参数(Nginx 根据URL带的参数转发的实现)
- sql语句的groupby是做什么的(深入浅析SQL中的group by 和 having 用法)
- html5div例子(html5 外链式实现加减乘除的代码)
- 搭建好的ftp服务器在哪里(如何在自己的电脑上搭建FTP服务器?)
- tcp协议实现两个基本功能(TCP性能调优实现原理及过程解析)
- SqlServer 英文单词全字匹配详解及实现代码(SqlServer 英文单词全字匹配详解及实现代码)
- 如何布局网站的广告位
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9