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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
js实现京东轮播图效果
Jun 30 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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 list()函数的详解
2013/06/05 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
浅谈php调用python文件
2019/03/29 PHP
Add a Table to a Word Document
2007/06/15 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
理解javascript闭包
2015/12/15 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
公司活动邀请函
2014/01/24 职场文书
职务聘任书范文
2014/03/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书