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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
详解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
牡丹941资料
2021/03/01 无线电
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
python局域网ip扫描示例分享
2014/04/03 Python
在Python下尝试多线程编程
2015/04/28 Python
Python常用小技巧总结
2015/06/01 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
什么是设计模式
2012/06/17 面试题
市场安全管理制度
2014/01/26 职场文书
法人委托书范本格式
2014/09/15 职场文书
公务员政审个人总结
2015/02/12 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python