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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
移动节点的jquery代码
Jan 13 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
基于Webpack4和React hooks搭建项目的方法
Feb 05 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python抓取手机号归属地信息示例代码
2016/11/28 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
25岁生日感言
2014/01/13 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL