Vue用vant组件写移动端时，实现横屏弹出遮罩层提示用户切换竖屏

今天做的项目移动端只配了竖屏的，横屏就很乱，无奈之下，想看看有没有禁止横屏的方法。搜索之后，还是选择了遮罩层提示用户切换回竖屏。

解决：

1、首先用的是vant组件，自带遮罩层Overlay，第一步是在main.js中引用该组件并在app.vue中应用。（具体官网都有，此处不再赘述）

app.vue中

 <van-overlay :show="show">
      <div class="wrapper">
        <img src="../public/tip1.png" class="image" />
      </div>
    </van-overlay>

我自己设置的css 图片只是字和图案的png，所以只需要用flex保证在中间就行，可根据需要自行设置

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.image {
  width: 100%;
}

2、第二步解决的是监听当前窗口的变化，查了之后发现vue有一个窗口变化的方法resize，通过监听窗口变化实现横竖屏检测。script中的完整代码如下

export default{
data(){
show:false,
}
//在mounted中注册监听方法
 mounted() {
    window.addEventListener("resize", this.renderResize, false);
  },
//beforeDestroy移除监听事件
  beforeDestroy() {
    window.removeEventListener("resize", this.renderResize, false);
  },
  methods: {
//监听方法
    renderResize() {
//获取当前窗口的长和高
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (width > height) {
//长大于宽则表示横屏，弹出遮罩层
        this.show = true;
      } else {
//竖屏则移除遮罩层
        this.show = false;
      }
    },
}

实现效果：

横屏弹出提示，竖屏则会自动移除

总结：

1、resize监听窗口变化

2、window的监听事件要挂在mounted钩子函数上，个人理解是mounted表示已经挂载完成，等挂载完成后再去监听可以避免重复调用，即第一次窗口变化应该在窗口已经存在的时候。

3、查阅了一下window.addEventListener中各个参数的含义

addEventListener(type,listener.useCapture)

简单的说，第一个参数就是事件名称（此处指resize窗口改变），第二个参数为监听到第一个参数的事件时，执行的方法。而第三个参数则为监听器在哪个阶段。如果设置为true，则会优先执行该监听器。

此处引用百度详解：

这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false.