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中 For, While与递归的用法
May 07 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JQuery球队选择实例
May 18 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
中科软测试工程师面试题
2012/06/16 面试题
办理退休介绍信
2014/01/09 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript