通过点击按钮实现查看全屏和退出全屏的效果

news2024/10/6 10:40:39

动态效果如图: 可以通过点击按钮,或者esc键实现全屏和退出全屏的效果

 实现代码:

<template>
    <div class="hello">
        <el-button @click="fullScreen()" v-if="!isFullscreen">查看全屏</el-button>
        <el-button @click="fullScreen()" v-else>退出全屏</el-button>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    created() {
        document.addEventListener('fullscreenchange', () => {
            this.$nextTick(() => {
                // 这里对全屏后样式进行操作
                this.isFullscreen = !this.isFullscreen;
            });
        });
    },
    data() {
        return {
            isFullscreen: false
        };
    },
    methods: {
        fullScreen() {
            /*判断是否全屏*/
            let isFullscreen =
                document.fullScreenElement || //W3C
                document.msFullscreenElement || //IE
                document.mozFullScreenElement || //火狐
                document.webkitFullscreenElement || //谷歌
                false;
            if (!isFullscreen) {
                let el = document.documentElement;
                if (el.requestFullscreen) {
                    el.requestFullscreen();
                } else if (el.mozRequestFullScreen) {
                    el.mozRequestFullScreen();
                } else if (el.webkitRequestFullscreen) {
                    el.webkitRequestFullscreen();
                } else if (el.msRequestFullscreen) {
                    el.msRequestFullscreen();
                }
                console.log('切换到了全屏');
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
                console.log('退出了全屏');
            }
        }
    }
};
</script>

<style scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1526675.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

centos创建并运行一个redis容器 并支持数据持久化

步骤 : 创建redis容器命令 docker run --name mr -p 6379:6379 -d redis redis-server --appendonly yes 进入容器 : docker exec -it mr bash 链接redis : redis-cli 查看数据 : keys * 存入一个数据 : set num 666 获取数据 : get num 退出客户端 : exit 再退…

猫头虎分享已解决Bug || TypeError: Cannot interpret ‘float‘ value as integer.

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

luceda ipkiss教程 62:等长波导布线(二)

教程 27介绍了两段波导等长布线的例子&#xff0c;下面同样是通过控制偏移量实现三段波导的等长布线&#xff1a; 所有代码如下&#xff1a; from si_fab import all as pdk from ipkiss3 import all as i3class demo(i3.Circuit):mmi i3.ChildCellProperty(doc"mmi in…

数据导入--Insert into

Insert Into是我们在MySQL中常用的导入方式&#xff0c;StarRocks同样也支持使用Insert into的方式进行数据导入&#xff0c;并且每次insert into操作都是一次完整的导入事务。 在StarRocks中&#xff0c;Insert的语法和MySQL等数据库的语法类似&#xff0c;具体可以参考官网文…

苹果谷歌,要联手反攻了

一则消息&#xff0c;让苹果、谷歌的夜盘股价一度分别暴拉1.5、3.5%&#xff0c;谷歌盘前甚至飙升超过5.5%&#xff0c;引发市场一阵轰动。 据知情人士透露&#xff0c;苹果公司正在谈判将谷歌的Gemini人工智能引擎植入iPhone&#xff0c;希望获得Gemini的授权&#xff0c;为今…

【办公类-22-11】周计划系列(5-3)“周计划-03 周计划内容循环修改“ (2024年调整版本)

背景需求&#xff1a; 前文从原来的“新模版”文件夹里提取了周计划主要内容和教案内容。 【办公类-22-10】周计划系列&#xff08;5-2&#xff09;“周计划-02源文件docx读取5天“ &#xff08;2024年调整版本&#xff09;-CSDN博客文章浏览阅读1.1k次&#xff0c;点赞29次&…

全基因集GSEA富集分析

原文链接&#xff1a;一文完成全基因集GSEA富集分析 本期内容 写在前面 我们前面分享过一文掌握单基因GSEA富集分析的教程&#xff0c;主要使用单基因的角度进行GSEA富集分析。 我们社群的同学咨询&#xff0c;全基因集的GSEA如何分析呢&#xff1f;&#xff1f;其实&#x…

利用自定义 URI Scheme 在 Android 应用中实现安全加密解密功能

在现代移动应用开发中&#xff0c;安全性和用户体验是至关重要的考虑因素。在 Android 平台上&#xff0c;开发人员可以利用自定义 URI Scheme 和 JavaScript 加密解密技术来实现更安全的数据传输和处理。本文将介绍如何在 Android 应用中注册自定义 URI Scheme&#xff0c;并结…

C语言例:整型常量025,求解十进制和十六进制

1. 八进制数的每一位乘以对应的权值&#xff08;8的幂&#xff09;&#xff0c;然后将结果相加&#xff0c;得到十进制数。 025 21 2.八进制先转二进制&#xff08;一变三&#xff09;&#xff0c;再二进制转十六进制&#xff08;四合一&#xff09; 025 0001 0101 0…

25双体系Java学习之StringBuffer和StringBuilder

StringBuffer和StringBuilder ★小贴士 String str new String("welcome to "); str "here"; 字符串的拼接过程实际上是通过建立一个StringBuffer&#xff0c;然后调用StringBuffer的append方法&#xff0c;最后再将StringBuffer转为字符串&#xff0c…

第四百一十回

文章目录 1. 概念介绍2. 方法与细节2.1 获取方法2.2 使用细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何获取当前系统语言"相关的内容&#xff0c;本章回中将介绍如何获取时间戳.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…

ElasticSearch架构设计

一、基础概念 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene™ 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 Lucene 那么简单&#xff0c;它不仅包括了全文搜索功能&#xff0c;还可以进行以下工作: 一个分布式的实时文档…

【Linux】深入了解Linux磁盘配额:限制用户磁盘空间的利器

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 前言 在多用户环境下管理磁盘空间是服务器管理中的一项重要任务。Linux提供了强大的磁盘配额功能&#xff0c;可以帮助管理员限制用户或组对文件系统…

【趣味项目】命令行图片格式转换器

【趣味项目】一键生成LICENSE 项目地址&#xff1a;GitHub 项目介绍 一款命令行内可以批量修改图片格式的工具 使用方式 npm install xxhls/image-transformer -gimg-t --name.*.tiff --targetpng --path./images --recursiontrue技术选型 typeScript: 支持类型体操chal…

你开发的系统国际化了吗?

亲爱的朋友们&#xff0c;周一好&#xff0c;新的一周&#xff0c;精神满满。 在开发Spring Boot应用时&#xff0c;接口的参数校验是一个重要的环节&#xff0c;它确保了数据的完整性和准确性。而国际化处理则使得应用能够支持多种语言&#xff0c;提升了用户体验。 一、参数…

vue中判断是否使用自定义插槽

在封装自定义组件时&#xff0c;需要判断使用者是否使用了插槽<slot"aaa">&#xff0c;如果没有则使用一个组件中默认的值&#xff0c;反之就用传入的内容<template name"aaa"></template>,实现如下&#xff1a; <div class"lin…

《1w实盘and大盘基金预测 day6》

昨日预测完美&#xff0c;点位基本符合&#xff0c;我预测3052&#xff0c;实际最低3055。 走势也符合高平开&#xff0c;冲高回落&#xff0c;再反震荡上涨 大家可以观察我准不准哟&#xff5e;后面有我的一些写笔记、分享的网站。 关注公众号&#xff0c;了解各种理财预测内…

【字符串匹配】BF与KMP算法

一、字符串匹配问题 字符串匹配问题是指在一个主文本字符串中查找一个指定的模式字符串&#xff0c;并确定模式字符串在主文本中出现的位置。这个问题在计算机科学中非常常见&#xff0c;尤其是在文本处理、数据搜索和生物信息学等领域。 字符串匹配问题通常涉及到以下几个方…

JS原型和原型链的理解

原型链图&#xff0c;图中Parent是构造函数&#xff0c;p1是通过Parent实例化出来的一个对象 前置知识 js中对象和函数的关系&#xff0c;函数其实是对象的一种 函数、构造函数的区别&#xff0c;任何函数都可以作为构造函数&#xff0c;但是并不能将任意函数叫做构造函数&…

mybatis-plus 的saveBatch性能分析

Mybatis-Plus 的批量保存saveBatch 性能分析 目录 Mybatis-Plus 的批量保存saveBatch 性能分析背景批量保存的使用方案循环插入使用PreparedStatement 预编译优点&#xff1a;缺点&#xff1a; Mybatis-Plus 的saveBatchMybatis-Plus实现真正的批量插入自定义sql注入器定义通用…