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虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
热门推荐
- 浅析vps和云服务器的区别(浅析vps和云服务器的区别)
- php开发技巧和方法(php+ajax实现商品对比功能示例)
- dedecms样式的引入(dedecms 5.7 文章不能上传图片的解决方法Upload filetype not allow)
- 云服务器安全么(云服务器如何识别真假)
- sql数据拆分插入另一个表(Sql Server数据把列根据指定内容拆分数据的方法实例)
- python中的变量与变量类型(Python变量类型知识点总结)
- httpcontextbase 与 httpcontext
- jquery修改带有!important的样式
- python中创建类的方法(Python中如何导入类示例详解)
- amaze开发者(AmazeUI中各种的导航式菜单与解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9