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

解决:

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.