vue h5页面实现某块全屏后横屏

原文链接
全屏screenfull
横屏方法

全屏需要安装下面的依赖，需要加上版本，最新的会报错

npm install --save-dev screenfull@5.1.0

页面代码

<div class="map-box" ref="mapbox">
  <div class="map-mid-box" ref="mapmidbox">
    <div id="map" ref="map"></div>
    <div class="full-screen" @click="handleisScreenFull">
      <div class="icon"></div>
      <div class="text">全屏</div>
    </div>
  </div>
</div>

在页面引用全屏方法

import screenfull from "screenfull";

以下为点击全屏方法

 handleisScreenFull() {
   if (!screenfull.isEnabled) {
     // 如果不支持进入全屏，发出不支持提示
     this.$message({
       message: "您的浏览器版本过低不支持全屏显示！",
       type: "warning",
     });
     return false;
   }
   //此处填入需要全屏的ref属性值即可
   screenfull.toggle(this.$refs.mapbox);
   this.$nextTick(() => {
     this.rotateBox();
   });
 },

以下为切换横屏/竖屏方法

rotateBox() {
  this.isScreenFull = !this.isScreenFull;//是否全屏状态
  let width = document.documentElement.clientWidth,//页面宽度
    height = document.documentElement.clientHeight,//页面高度
    wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
    style = "";//样式
  if (height < width) {//注意原来就是宽屏时不用横屏
  	 return;
  }
  if (this.isScreenFull) {
	  // 横屏
	 style += "width:" + height + "px;";
	 style += "height:" + width + "px;";
	 style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
	 // 注意旋转中点的处理
	 style +=
	   "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
	 style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  } else {
	 // 竖屏
	 style += "width:100%";
	 style += "height:100%;";
	 style += "-webkit-transform: rotate(0); transform: rotate(0);";
	 style += "-webkit-transform-origin: 0 0;";
	 style += "transform-origin: 0 0;";
  }
  wrapper.style.cssText = style;
},