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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jquery移动节点实例
2015/01/14 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
应届毕业生自荐书
2014/06/18 职场文书
关于爱国的标语
2014/06/24 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
学雷锋倡议书
2015/01/19 职场文书
个人培训总结
2015/03/05 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
思想工作总结范文
2015/08/12 职场文书