vue封装全屏组件无插件操作

Posted 2023-02-26 水香木鱼

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

---

文章目录

简介：这是一篇有关【vue封装全屏组件【无插件操作】】的文章，博主用最精简的语言去表达给前端读者们。

1、fullScreen.vue

在components路径下，创建fullScreen.vue 文件

<template>
  <div>
    <el-button @click="fullScreen()">全屏</el-button>
  </div>
</template>
<script>
export default 
  data() 
    return 
      isFullScreen: false,
    ;
  ,

  /*
   * 浏览器全屏方法
   * 使用方法: 绑定点击事件即可
   * @return void
   */
  methods: 
    fullScreen() 
      if (this.isFullScreen == false) 
        var ele = document.documentElement,
          reqFullScreen =
            ele.requestFullScreen ||
            ele.webkitRequestFullScreen ||
            ele.mozRequestFullScreen ||
            ele.msRequestFullscreen;
        if (typeof reqFullScreen !== "undefined" && reqFullScreen) 
          reqFullScreen.call(ele);
        
        this.isFullScreen = true;
       else 
        var ele = document.documentElement;
        if (document.exitFullscreen) 
          document.exitFullscreen();
         else if (document.mozCancelFullScreen) 
          document.mozCancelFullScreen();
         else if (document.webkitCancelFullScreen) 
          document.webkitCancelFullScreen();
         else if (document.msExitFullscreen) 
          document.msExitFullscreen();
        
        this.isFullScreen = false;
      
    ,
  ,
;
</script>

2、页面使用

<template>
  <!--全屏组件-->
 <FullScreen></FullScreen>
</template>
<script>
import FullScreen from "../components/fullScreen.vue";
export default 
   components:  FullScreen ,

</script>

---

相关推荐

⭐前端vue实现注册功能与正则校验规则
⭐前端vue正则表达式-隐私脱敏处理
⭐前端vue路由模块拆分归类【理解版】
⭐vue实现pdf在线预览业务
⭐vue实现keep-alive页面缓存【三步骤配置，一步到位】