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 判断字符串是否为数字的简单方法
Jul 25 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 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
smarty中常用方法实例总结
2015/08/07 PHP
使javascript也能包含文件
2006/10/26 Javascript
javascript编程起步(第七课)
2007/01/10 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python pass 语句使用示例
2014/03/11 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
应聘护士自荐信
2013/10/21 职场文书
电子银行营销方案
2014/02/22 职场文书
《匆匆》教学反思
2014/02/22 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python