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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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读取csv文件内容的详解
2013/06/18 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python List cmp()知识点总结
2019/02/18 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python递归函数特点及原理解析
2020/03/04 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
25道Java面试题集合
2013/05/21 面试题
教育实践活动对照检查材料
2014/09/23 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
检讨书范文300字
2015/01/28 职场文书
考研经验交流会策划书
2015/11/02 职场文书
公司周年庆寄语
2019/06/21 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang