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>
相关推荐
用户14567756103710 分钟前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎12 分钟前
npm、yarn、pnpm
前端·npm·node.js
天生我材必有用_吴用1 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo1 小时前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine2 小时前
JS Entry和 HTML Entry
前端