Vue项目中点击按钮实现全屏模式

Posted 2023-04-16

参考技术A 使用原生js实现全屏

原生js实现起来比较复杂，考虑到各种浏览器的兼容性问题

还有另外一种较为方便的方法

在vue项目中引入插件

screen()

  // 如果不允许进入全屏，发出不允许提示

  if (!screenfull.enabled)

    this.$message("您的浏览器不能全屏");

    return false;

 

  screenfull.toggle();

  ,

vue实现某容器点击放大至全屏

前言

今天产品给提了一个优化项目的需求，实现地图上通过点击图标全屏的效果，点击全屏？我立马就想到了 window 自带的一个方法 exitFullscreen。

实现思路

实现这个小功能非常的简单，我们只需要调用 window 自带的一个方法 exitFullscreen ，然后获取需要全屏放大容器的id即可实现。

核心代码

<template>
  <div>
    <div class="mapBox">
      <!-- // 地图容器 -->
      <baidu-map id="mapCodeID" class="map" :center="lng: 116.404, lat: 39.915" :zoom="15" @ready="handler">
      </baidu-map>
      <!-- // 小图标 -->
      <div class="iconBox" @click="enlarge"><img src="https://s4.ax1x.com/2022/01/27/7jEmTO.png" title="点击放大"></div>
    </div>
  </div>
</template>
<script>
  export default 
    data() 
      return 
        FullScreen: false, // 是否全屏
      
    ,
    mounted() ,
    methods: 
      //点击全屏事件
      enlarge() 
        // let element = document.documentElement;//全屏放大
        let element = document.getElementById("mapCodeID"); //需要全屏容器的id
        // 浏览器兼容
        if (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) 
            element.msRequestFullscreen();
          
        
        this.FullScreen = !this.FullScreen;
      ,
      //地图事件方法
      handler(BMap,map) 
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        let mapStyle = 
          style: "midnight"
         //地图背景色
        map.setMapStyle(mapStyle);
      ,
    
  
</script>

<style scoped>
  /* 最外层样式 */
  .mapBox 
    position: relative;
  

  /* 地图样式 */
  .map 
    width: 100%;
    height: 50vh;
  

  /* 小图标的样式 */
  .iconBox 
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  
</style>