小猪最近使用vue开发项目的时候,需要实现将指定区域全拼展示的操作。
小猪选择使用js来实现,实现原理:使用requestFullscreen()方法将指定的dom元素在全屏模式下打开。
支持的部分浏览器版本:

实现代码:(仅供参考)

<template>
  <div id="home-content">
    展示区域
    <button @click="enlarge">放大</button>

         <button @click="narrow">缩小</button>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        isEnlarge: false
      }
    },
    methods: {
      // 放大
      enlarge () {
            const fullarea = document.getElementById('home-content')
            if (fullarea.requestFullscreen) {
                fullarea.requestFullscreen()
            } else if (fullarea.webkitRequestFullScreen) {
               fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等)
            } else if (fullarea.mozRequestFullScreen) {
               fullarea.mozRequestFullScreen() // moz内核(firefox)
            } else if (fullarea.msRequestFullscreen) {
               fullarea.msRequestFullscreen() // IE11、edge
            }
            this.isEnlarge = true
         },
      // 缩小
         narrow () {
            if (document.exitFullscreen) {
               document.exitFullscreen()
            } else if (document.webkitCancelFullScreen) {
               document.webkitCancelFullScreen() // webkit内核(chrome、safari、Opera等)
            } else if (document.mozCancelFullScreen) {
               document.mozCancelFullScreen() // moz内核(firefox)
            } else if (document.msExitFullscreen) {
               document.msExitFullscreen() // IE11、edge
            }
            this.isEnlarge = false
         }
    }
  }
</script>

js 全屏显示指定区域的更多相关文章

  1. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. Linux 命令 - watch: 反复执行命令,全屏显示输出

    watch 命令周期性地执行命令,全屏显示输出.可以通过 watch 命令反复执行某一程序来监视它的输出变化. 命令格式 watch [-dhvt] [-n <seconds>] [--d ...

  3. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  4. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  6. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  7. Android开发之全屏显示的两种方法

    1.通过修改清单文件中Theme,实现全屏 <application android:name=".MyApplication" android:allowBackup=&q ...

  8. Qt on Android:让 Qt Widgets 和 Qt Quick 应用全屏显示

    Android 系统版本号非常多,较新的 4.4 ,较老的 2.3 ,都有人用. Qt on Android 开发的 Android 应用.默认在 Android 设备上是非全屏的. 而有些应用的需求 ...

  9. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  10. Activity设置全屏显示的两种方式及系统自带theme属性解析

    转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...

随机推荐

  1. tcpdump: error while loading shared libraries: libpcap.so.1: cannot open shared object file: No such file or directory

    [root@inner ~]# tcpdump -i any -s 0 -w trunkm.pcaptcpdump: error while loading shared libraries: lib ...

  2. Vue后台管理项目中解决需要配置多个端口号问题

    背景 登录接口:http://39.98.123.211:8170/ 商品接口:http://39.98.123.211:8510/ 可见前面是地址是一致的,但是端口号不一样. 这就会导致,登录进得去 ...

  3. django.core.exceptions.ImproperlyConfigured: Requested setting INSTALLED_APPS, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE or call settings.

    import os if __name__ == '__main__': # 下面的autoUI改成你当前的项目名称 os.environ.setdefault("DJANGO_SETTIN ...

  4. 打卡node day04--express-get.post.路由

    1.基本使用 npm i express 2.请求 get: post: express 不能直接解析请求体,所以需要第三方插件 ---->body-parser 使用 npm install ...

  5. js给ul下面所有的li追加类名

  6. windows下判断程序是否内存泄漏

    在main函数第一行写 _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF | _CRTDBG_LEAK_CHECK_DF); 程序退出后如果有泄漏会有打印

  7. TypeScript 元组

    TypeScript 元组 我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组. 元组中允许存储不同类型的元素,元组可以作为参数传 ...

  8. Java向MySQL写入中文乱码问题解决

    Java向MySQL写入中文乱码问题解决 以下仅为本人工作.学习过程中所接触到的内容,不足之处欢迎指出. 问题现象: 使用Java代码向MySQL数据库写入数据,中文字符出现乱码. 解决步骤: 1.查 ...

  9. Linux 系统挂载 ntfs 移动硬盘无法写入的问题

    linux 下挂载 ntfs 移动硬盘无法写入问题 在机房使用移动硬盘时发现无法写入硬盘,具体是 Ubuntu 21.04 ,移动硬盘是 SSD ,分区类型是 NTFS . 首先百度得知最优办法是安装 ...

  10. 循环4-for循环

    一.语法 for循环和while类似,常用于执行有限次数的循环,有两种语法结构, 1.变量列表循环 语法: for 变量名 in 变量取值列表 do 指令...... done 变量取值列表中的值,要 ...