vue+element ui 设置页面全屏全屏和退出全屏的切换

方式1

screenfull 插件

// 属性
screenfull.isFullscreen; // 判断当前页是否全屏 返回类型 布尔值（true/false）
screenfull.isEnabled; // 判断当前浏览器是否支持全屏 返回类型 布尔值（true/false）//方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

安装插件
- 1.yarn add screenfull 或者 npm i screenfull
引入插件
- 2.在页面进行引入 import screenfull from 'screenfull'
使用插件
- 3 参考代码：

<template><div class="hed_rig"><!-- 三目运算 展示对应ico --><i :class=" this.iFullScreen? 'el-icon-copy-document headerIco': ' el-icon-full-screen headerIco'"title="全屏/退出全屏"@click="toggleFullScreen" ></i>      </div>
</template>
<script>            // 引入全屏插件
import screenfull from 'screenfull'
export default {name: 'test',data() {return {  iFullScreen: false,}},methods: {// 页面全屏事件toggleFullScreen() {// 判断当前浏览器是否支持全屏if (screenfull.isEnabled) {//当前页面是否全屏if (!screenfull.isFullscreen) {this.iFullScreen = !this.iFullScreenscreenfull.request()} else {this.iFullScreen = !this.iFullScreenscreenfull.exit()}} else {//提醒 无法全屏浏览this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })}},},}

方式2

通过 js 实现

<template><div><el-button type="primary" @click="screen">全屏</el-button></div>
</template><script>
export default {name: 'indexAss',data() {return {fullscreen: false,}},methods: {screen() {let element = document.documentElementif (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) {// IE11element.msRequestFullscreen()}}this.fullscreen = !this.fullscreen},},
}
</script>

vue+element ui 设置页面全屏全屏和退出全屏的切换相关推荐

vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
实战 | Vue + Element UI 页面创建
这是小小本周的第六篇,本篇将会着重讲解关于Vue和Element UI 相关的内容思维导图网页版Vue Cli 基本使用这里使用Vue Cli 进行基本的使用安装 npm install -g ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
element UI的带输入建议el-autocomplete总结（详细，全）
Table of Contents 引用el-autocomplete 触发带输入建议的两种方式转成输入建议回调的数据结构增加回车触发事件解决回车后建议输入框没消失的bug vue+elemen ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
为什么java退出全屏_Java全屏模式与退出全屏：
该楼层疑似违规已被系统折叠隐藏此楼查看此楼浏览器全屏模式的启动函数requestFullscreen(),而且需要附带各浏览器的js方言前缀. Js代码: // 启动全屏!判断浏览器的种类 fun ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

vue+element ui 设置页面全屏全屏和退出全屏的切换

vue+element ui 设置页面全屏全屏和退出全屏的切换

方式1

方式2

vue+element ui 设置页面全屏全屏和退出全屏的切换相关推荐

最新文章

热门文章

vue+element ui 设置页面全屏 全屏和退出全屏的切换

vue+element ui 设置页面全屏 全屏和退出全屏的切换

方式1

方式2

vue+element ui 设置页面全屏 全屏和退出全屏的切换相关推荐

最新文章

热门文章

vue+element ui 设置页面全屏全屏和退出全屏的切换

vue+element ui 设置页面全屏全屏和退出全屏的切换

vue+element ui 设置页面全屏全屏和退出全屏的切换相关推荐