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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
innerText 使用示例
Jan 23 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
简单的python后台管理程序
2017/04/13 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
tensorflow如何批量读取图片
2019/08/29 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
金智子午JAVA面试题
2015/09/04 面试题
名企HR怎样看待求职信
2014/02/23 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
继续教育个人总结
2015/03/03 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android