vue.js编写移动端页面，检测旋转屏幕，横竖屏。

Question

初学vue，想要在检测到旋转屏幕后显示遮罩层。现在我的想法是在mounted时期添加监听屏幕旋转事件，如果检测到了，则修改data中的值isShowCover来改变v-show中的真假值，来达到显示隐藏遮罩层的目的。但是mounted时期好像取不到data中的值。我是用alert来判断取不取的到值的.this.isShowCover 是undefinedthis.showCover() alert都不提示了。this.$options.methods.showCover() alert也不提示了。所以想问的是想要监听到旋转屏幕事件，这个事件应该加在哪里？检测到旋转屏幕事件后，怎么才能把isShowCover的值改变来显示隐藏遮罩层？data中的值大概是什么时候可以取到并且修改？提前感谢下回答的大佬。下面附主要代码。<template><div v-show="isShowCover" style = "position:fixed;background:transparent;background:rgba(0,0,0,0.5);margin:auto;top:0;bottom:0;left:0;right:0">          <img src="../../pic/rotatePic.png" style="width:200px;height:200px;margin:auto;top:0;bottom:0;left:0;right:0"></div></template><script>export default {    data: () => ({      isShowCover: false    }),    mounted() {    window.addEventListener(      "onorientationchange" in window ? "orientationchange" : "resize",      function() {        if (window.orientation === 90 || window.orientation === -90) {            //想把下面的alert换成能够控制v-show的代码                      alert(            this.$options.methods.showCover() +              "横屏可能导致页面异常，建议竖屏操作！"          );          //alert("123");仅alert纯文本可以正常运行        }        //window.location.reload();      },      false      );    },    methods:{        showCover() {          return "123";        },    }</script>

Answer 1

listener 里的 function 的 this 不对吧, 指向的应该不是 vue 的 this, 换成() => 应该就好了.

<script>

export default {

    data: () => ({

      isShowCover: false

    }),

    mounted() {

    let self = this; // 这里

    window.addEventListener(

      "onorientationchange" in window ? "orientationchange" : "resize",

      function() {

        if (window.orientation === 90 || window.orientation === -90) {

            //想把下面的alert换成能够控制v-show的代码

            

          alert(

            self.$options.methods.showCover() +

              "横屏可能导致页面异常，建议竖屏操作！"

          ); // 这里用 this 作用域就不对了.

          //alert("123");仅alert纯文本可以正常运行

        }

        //window.location.reload();

      },

      false

      );

    },

    methods:{

        showCover() {

          return "123";

        },

    }

</script>