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

动态效果如图: 可以通过点击按钮,或者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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

登录远程SQLServer

1&#xff0c;登录格式: 服务器名称:192.168.0.104,1433 192.168.0.104&#xff1a;SQLServer所在远程PC的IP &#xff0c;&#xff1a;逗号分割IP与端口号 1433&#xff1a;SQLServer所使用的端口号&#xff08;默认为1433&#xff09;&#xff0c;当使用默认端口号时可以省…

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

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

WanAndroid(鸿蒙版)开发的第三篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

微信小程序 nodejs+vue+uninapp学生在线选课作业管理系统

基于微信小程序的班级作业管理助手使用的是MySQL数据库&#xff0c;nodejs语言和IDEA以及微信开发者工具作为开发工具&#xff0c;这些技术和工具我在日常的作业中都经常的使用&#xff0c;并且因为对编程感兴趣&#xff0c;在闲暇时间也进行的进行编程的提高&#xff0c;所以在…

09|代理(上):ReAct框架,推理与行动的协同

应用思维链推理并不能解决大模型的固有问题&#xff1a;无法主动更新自己的知识&#xff0c;导致出现事实幻觉。也就是说&#xff0c;因为缺乏和外部世界的接触&#xff0c;大模型只拥有训练时见过的知识&#xff0c;以及提示信息中作为上下文提供的附加知识。如果你问的问题超…

AI+权重衰退

AI权重衰退 1权重衰退2代码实现 2丢弃法 1权重衰退 AI权重衰退是指在人工智能&#xff08;AI&#xff09;领域中的一种技术或方法&#xff0c;用于训练机器学习模型时对权重进行惩罚或调整&#xff0c;以避免过拟合现象的发生。 在机器学习中&#xff0c;过拟合是指模型在训练…

c语言文件操作(中)

目录 1. 文件的顺序读写1.1 顺序读写函数1.2 顺序读写函数的原型和介绍 结语 1. 文件的顺序读写 1.1 顺序读写函数 函数名功能适用于fgetc字符输入函数所有输出流fputc字符输出函数所有输出流fgets文本行输入函数所有输出流fputs文本行输出函数所有输出流fscanf格式化输入函数…

苍穹外卖-day08:导入地址簿功能代码(单表crud)、用户下单(业务逻辑)、订单支付(业务逻辑,cpolar软件)

苍穹外卖-day08 课程内容 导入地址簿功能代码用户下单订单支付 功能实现&#xff1a;用户下单、订单支付 用户下单效果图&#xff1a; 订单支付效果图&#xff1a; 1. 导入地址簿功能代码&#xff08;单表crud&#xff09; 1.1 需求分析和设计 1.1.1 产品原型&#xff08…

C++_day6

思维导图&#xff1a; 2试编程 封装一个动物的基类&#xff0c;类中有私有成员: 姓名&#xff0c;颜色&#xff0c;指针成员年纪 再封装一个狗这样类&#xff0c;共有继承于动物类&#xff0c;自己拓展的私有成员有:指针成员:腿的个数(整型 int count)&#xff0c;共有成员函数…

7.测试教程-自动化测试selenium-2

文章目录 1.webdriver API1.1元素的定位1.2id定位1.3name 定位1.4tag name 定位和class name 定位1.5CSS 定位(常用)1.5.1概念1.5.2实操1.5.3语法 1.6XPath 定位1.6.1概念1.6.2实操1.6.3语法 1.7link text定位1.8Partial link text 定位1.9一个简单的测试实战1.10CSS定位和XPat…

【人工智能】英文学习材料03(每日一句)

&#x1f33b;个人主页&#xff1a;相洋同学 &#x1f947;学习在于行动、总结和坚持&#xff0c;共勉&#xff01; 目录 Chain Rule (链式法则) Dimensionality Reduction (降维) Long Short-Term Memory (LSTM) (长短期记忆网络) Gradient Explosion (梯度爆炸) Gradie…

Java项目:63 ssm网上花店设计+vue

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统具备友好性且功能完善。管理员登录进入后台之后&#xff0c;主要完成花材选择管理&#xff0c;用户管理&#xff0c;鲜花管理&#xff0c;鲜花出入…

计算机网络实践学习 思科实验31:配置思科DHCP

思科实验31&#xff1a;配置思科DHCP 实验拓扑图实验目标实验步骤实验配置 实验拓扑图 实验目标 配置思科设备作为DHCP服务器 实验步骤 配置OSPF路由协议配置R1为DHCP服务器配置DHCP中继&#xff0c;使得PC3可以获得地址全网通信测试 实验配置 1、配置R1为DHCP服务器&…

React Native: could not connect to development server

问题&#xff1a; 运行模拟器错误&#xff1a;无法连接到开发服务器 原因分析&#xff1a; 1、确认模拟器连接状态&#xff0c;是连接成功的 查看进程的端口占用&#xff0c;也没问题 lsof -i tcp:8081 kill pid2、检查包服务器是否运行正常 连接真机进行调试发现真机是正常…

【力扣精选算法100道】——带你了解(数组模拟栈)算法

目录 &#x1f4bb;比较含退格的字符串 &#x1f388;了解题意 &#x1f388;分析题意 &#x1f6a9;栈 &#x1f6a9;数组模拟栈 &#x1f388;实现代码 844. 比较含退格的字符串 - 力扣&#xff08;LeetCode&#xff09; &#x1f4bb;比较含退格的字符串 &#x1f3…

查看网卡和网关命令

ifconfig&#xff08;接口配置&#xff09; 是一个网络管理工具&#xff0c;它用于配置和查看 Linux 操作系统中网络接口的状态&#xff0c;使用ifconfig&#xff0c;您可以分配 IP 地址、启用或禁用接口、管理 ARP 缓存、路由等。 ping命令是个使用频率极高的网络诊断工具。…

win32汇编弹出对话框

之前书上有一个win32 asm 的odbc例子&#xff0c;它有一个窗体&#xff0c;可以执行sql&#xff1b;下面看一下弹出一个录入数据的对话框&#xff1b; 之前它在.code段包含2个单独的asm文件&#xff0c;增加第三个&#xff0c;增加的这个里面是弹出对话框的窗口过程&#xff0…

01初识Python

一、Python 简介 二、为什么要学Python&#xff1f; 三、Python 安装 四、输出第一条指令 五、总结 一、Python 简介 Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年创建。它具有简单易学的语法结构&#xff0c;被广泛应用于Web开发、数据科学、人工智…

LeetCode刷题记录:(11)组合(初识回溯算法)

leetcode传送通道 暂时记录&#xff0c;这篇没啥营养&#xff0c;不用看了 class Solution {List<List<Integer>> result new ArrayList<>(); // 存所有组合List<Integer> path new LinkedList<>(); //存每一个组合public List<List<Int…

高效使用git流程分享

准备 假设你已经 clone 了当前仓库&#xff0c;并且你的终端位置已经位于仓库目录中。 查询状态 查询状态常用的命令有 git status 和 git branch。 前者用于查询更改文件情况&#xff0c;后者用于展示所有分支。 chatbot-system$ git status On branch develop Your bran…