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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python中字符串对齐方法介绍
2015/05/21 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
大学在校生求职信范文
2013/11/21 职场文书
工程资料员岗位职责
2014/03/10 职场文书
六一儿童节主持词
2014/03/21 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
签约仪式致辞
2015/07/30 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
python基于turtle绘制几何图形
2021/06/15 Python