VUE实现全屏页面展示及退出

1、在vue项目下创建src/utils/util.js文件且加入如下代码:

javascript 复制代码
import Vue from 'vue'
const util = Vue.prototype.util = {}
// 切换全屏
util.fullScreen = function (element) {
    element = element || document.body;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

// 退出全屏
util.exitFullscreen = function () {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
export {
    util
}

2、vue页面加入全屏按钮及退出全屏按钮,功能实现如下:

javascript 复制代码
<template>
  <div ref="container" class="fit-container">
       <el-button  type="primary" v-if="fullScreenFlag==true" href="javascript:;"  icon="el-icon-full-screen" size="mini" class="filter-item" @click="fullScreen()">全屏</el-button>
       <el-button type="primary" v-if="fullScreenFlag==false"   href="javascript:;"   icon="el-icon-full-screen" size="mini" class="filter-item" @click="exitFullScreen()">退出全屏</el-button>
  </div>
</template>
<script>
import Vue from "vue"; // 引入vue
import {util} from "../../util/utils"
export default {
  data() {
    return {
      //全屏设置
      fullScreenFlag:true,
    };
  },
  methods: {
    //全屏
    fullScreen(){
      this.fullScreenFlag = false;
      this.util.fullScreen();
    },
    //退出全屏
    exitFullScreen(){
      this.fullScreenFlag = true;
      this.util.exitFullscreen();
    }
  },
};
</script>

<style></style>
相关推荐
拾光拾趣录1 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00002 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl3 分钟前
深度剖析Kafka读写机制
前端
FogLetter3 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan4 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan5 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan6 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录6 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee6 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我7 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html