Vue使用screenfull实现全屏效果


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码,供大家参考,具体内容如下

安装

npm install --save screenfull

在需要的页面引用

import screenfull from 'screenfull'

全屏使用

<template>
 <span @click='clickFullscreen'>全屏</span>
</template>
 
<script>
 import screenfull from 'screenfull'
 export default{
 name: 'screenfull',
 data(){
 return {
 isFullscreen: false
 }
 },
 methods:{
 clickFullscreen(){
 if (!screenfull.isEnabled) {
 this.$message({
 message: 'you browser can not work',
 type: 'warning'
 })
 return false
 }
 screenfull.toggle()
 }
 }
 }
</script>

原生实现方法

// 全屏事件 兼容
clickFullscreen() {
 let element = document.documentElement;
 if (this.isFullscreen) {
  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.isFullscreen= !this.isFullscreen;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue实现简单瀑布流布局
May 28 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
JavaScript编码小技巧分享
Sep 17 #Javascript
如何利用node转发请求详解
Sep 17 #Javascript
前端性能优化建议
Sep 17 #Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 #Javascript
You might like
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
node.js基础知识小结
2018/02/26 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python Requests 基础入门
2016/04/07 Python
python实现发送邮件功能代码
2017/12/14 Python
Python统计单词出现的次数
2018/04/04 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
详解python中递归函数
2019/04/16 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python 基于wx实现音乐播放
2020/11/24 Python
详解python中的异常和文件读写
2021/01/03 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
三好生演讲稿
2014/09/12 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
公司离职证明标准范本
2014/10/05 职场文书
给老婆的保证书
2015/01/16 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
思想工作总结范文
2015/08/12 职场文书