vue全屏事件开发详解


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue全屏事件开发的具体代码,供大家参考,具体内容如下

在项目中有需求相应浏览器全屏,写了个案例代码

先看看效果吧

vue全屏事件开发详解

全屏显示:

vue全屏事件开发详解

html代码:

<!-- el-tooltip 文字提示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
 <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
  <i class="el-icon-rank"></i>
 </el-tooltip>
</div>

js代码

data(){
return {
fullscreen: false
}
} 
 
// 全屏事件
  handleFullScreen(){
  let element = document.documentElement;
  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;
},

通过fullscreen判断的truefalse确定是否相应全屏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 #Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 #Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 #Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
You might like
生成静态页面的PHP类
2006/07/15 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
六个一活动实施方案
2014/03/21 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
行政管理专业求职信
2014/07/06 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
离婚案件上诉状
2015/05/23 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS