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 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
通过实例解析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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JS input 数字验证代码
2009/07/30 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python爬虫使用cookie登录详解
2017/12/27 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
工厂保洁员岗位职责
2013/12/04 职场文书
教师党员公开承诺书
2014/03/25 职场文书
售后服务承诺书范文
2014/03/26 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android