Vue 实时监听窗口变化并控制组件的显示与隐藏 记录一下

2022年05月10日 阅读数:12
这篇文章主要向大家介绍Vue 实时监听窗口变化并控制组件的显示与隐藏 记录一下,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

查阅了不少大神们的文章,大体都是只有前部分,后面的如何控制隐藏并无。
原本是用min-width来限制的 反正有滚动轴,缩再小也不会乱。
后来以为自适应看起来舒服点,仍是研究下自适应吧。作个笔记。
1.首先,一步一步来。
data里 添加一个变量 screenWidthweb

export default {
  name: "login",
  data() {
    return {
      screenWidth: document.body.clientWidth,  //给它赋值个(我的理解为网页的宽度)
      }
     }
   }

2.在页面加载时,挂载这个方法浏览器

 mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  }

3.最后监听screenWidth值的变化,经过控制台观察screenWidth变化的值ssh

watch: {
    screenWidth(val) {
      if (!this.timer) {                           // 为了不频繁触发resize函数致使页面卡顿,使用定时器
        this.screenWidth = val;          // 一旦监听到的screenWidth值改变,就将其从新赋给data里的screenWidth
        this.timer = true;
        let that = this;
        setTimeout(function() {
           console.log(that.screenWidth);      // 打印screenWidth变化的值
          that.timer = false;
        }, 400);
      }
    }
  }

4.那么当你缩放你所在网页的浏览器时,控制台就会打印出一个个值出来了。
在这里插入图片描述
5.有值了 那么怎么经过缩放来控制显示隐藏呢,这里贴个小李子。svg

<template>
  <div>
   <p v-show="isshow">随便整了一段文字,啥子均可以,也能够是任意div块,
   只要写上v-show, v-if也能够,通常来讲, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
   所以,若是须要频繁切换使用 v-show 较好,若是在运行时条件不大可能改变则使用 v-if 较好。
   </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
     screenWidth: document.body.clientWidth,     
      isshow:true,                                          //控制上面的isshow,
    }
  },
  methods: {},
  mounted() {
   const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    }
  },
watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        if (this.screenWidth < 1236) {               //这里写了个当值为1236时 就隐藏。
          this.isshow = false;
        } else {
          this.isshow = true;
        }
        this.timer = true;
        let that = this;
        setTimeout(function() {
         // 打印screenWidth变化的值
          console.log(that.screenWidth);           //观察完记得注释,否则卡死
          that.timer = false;
        }, 0);                                     
      }
    },
  }
}
</script>
<style scoped>
</style>

引入组件的话,也同样,函数

 <quanxian v-show="isshow"></quanxian>

总结,能够应用在哪里,若是当页面被缩小到最小时,这时候太多组件的话可能会引发错乱重叠,
不美观,这时候适当的隐藏掉一部分转为按钮来触发其实也不错。
我的理解,个中不足,望指出,作个笔记。this