vue-cli点击实现全屏功能


Posted in Javascript onMarch 07, 2020

本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下

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

方式一:js实现全屏

代码如下:

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

<script>
  export default {
    name: "index",
   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;
    }
   }
  }
</script>

<style scoped>

</style>

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

npm install --save screenfull

在使用的页面正确引入:

import screenfull from ‘screenfull'

代码如下:

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

<script>
 import screenfull from 'screenfull'
 export default {
  name: "home",
  data() {
   return {
    //默认不全屏
    isFullscreen: false
   }
  },

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

<style scoped>

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
javascript中this指向详解
Apr 23 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue全屏事件开发详解
Jun 17 #Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 #Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 #Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 #Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
国际经济贸易专业自荐信
2014/06/13 职场文书
党建工作整改措施
2014/10/28 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书