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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
JS实现简单日历特效
2020/01/03 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
使用Python操作MySQL的一些基本方法
2015/08/16 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
详解K-means算法在Python中的实现
2017/12/05 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python 合并拼接字符串的方法
2020/07/28 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python 写一个文件分发小程序
2020/12/05 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
财产公证书样本
2014/04/04 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
场地使用证明模板
2014/10/25 职场文书
房产分割协议书范文
2014/11/21 职场文书
师德培训心得体会2016
2016/01/09 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript