vue中实现点击变成全屏的多种方法


Posted in Javascript onSeptember 27, 2020

项目中有点击按钮实现全屏功能

方式一:js实现全屏

<template>
 <div>
   <a-button type="primary" @click="screen">全屏</a-button>
 </div>
</template>

data:

data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   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;
  },

方式二:使用的是sreenfull插件,执行命令安装

npm install --save screenfull

在使用的页面正确引入:

import screenfull from ‘screenfull'

代码如下:

<template>
   <div>
     <a-button type="primary" @click="screen">全屏</a-button>
   <div>
</template>

data:

data() {
  return {
   fullscreen: false
  };
 },

methods:

screen() {
   // 如果不允许进入全屏,发出不允许提示
   if (!screenfull.enabled) {
    this.$message("您的浏览器不能全屏");
    return false;
   }
   screenfull.toggle();
   this.$message.success("全屏啦");
  },

效果图:

vue中实现点击变成全屏的多种方法

实用

到此这篇关于vue中实现点击变成全屏的多种方法的文章就介绍到这了,更多相关vue点击全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
通过实例解析json与jsonp原理及使用方法
Sep 27 #Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 #Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 #Javascript
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
Javascript异步流程控制之串行执行详解
Sep 27 #Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 #Javascript
Openlayers实现测量功能
Sep 25 #Javascript
You might like
PHP操作数组相关函数
2011/02/03 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
本科毕业生应聘自荐信范文
2014/06/26 职场文书
装配出错检讨书
2014/09/23 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
教师节晚会主持词
2015/06/30 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python