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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JS实现随机点名器
Apr 12 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
最省空间的计数器
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python requests post多层字典的方法
2018/12/27 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
列车长先进事迹材料
2014/01/25 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
学校春季防火方案
2014/06/08 职场文书
学习考察心得体会
2014/09/04 职场文书
简易版租房协议书范本
2014/10/13 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Python 图片添加美颜效果
2022/04/28 Python