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 相关文章推荐
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
详解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作的文本留言本的例子(一)
2006/10/09 PHP
聊天室php&amp;mysql(三)
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php 魔术函数使用说明
2010/02/21 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
PHP 实现缩略图
2021/03/09 PHP
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
图书馆标语
2014/06/19 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
golang为什么要统一错误处理
2022/04/03 Golang