前端监听屏幕宽度尺寸变化(vue2)

mediaQuery//存储媒体对象,对象中包含matches字段,为布尔值,匹配到为true,未匹配到为false;checkMatchMedia函数用来在监听到事件时处理相关逻辑

javascript 复制代码
  data() {
    return {
        mediaQuery:null  
    };
  },
  mounted() {
    this.mediaQuery  = window.matchMedia("(min-width:1824px)")
    this.checkMatchMedia()
    this.mediaQuery.addListener(this.checkMatchMedia)
  },
  methods: {
    checkMatchMedia() {
      if(this.mediaQuery.matches) {
          console.log("匹配成功min-width:1824");
      }else {
        console.log("没有匹配成功");
      }
    }
  },
  beforeDestroy() {
    if(this.mediaQuery) {
      this.mediaQuery.removeListener(this.checkMatchMedia)
      }
  },
相关推荐
工边页字18 小时前
AI产品中的长期记忆和短期记忆是什么,你知道吗?
前端·人工智能·后端
HelloReader18 小时前
Flutter 页面导航Navigator.push 与自适应导航模式(十四)
前端
小凡同志18 小时前
那个复制粘贴了二十次 loading 的下午
前端·vue.js
还是大剑师兰特18 小时前
vue3中slot,template #名称 的详细说明和具体示例
javascript·vue.js·ecmascript
HelloReader18 小时前
Flutter 底层原理揭秘框架如何工作(十五)
前端
南篱18 小时前
前端必看:一口气搞懂跨域是什么、为什么、怎么解决
前端·javascript·面试
qq_4061761418 小时前
Vue 插槽与组件传参:从入门到精通
前端·javascript·vue.js
三年三月18 小时前
Redux 技术栈使用总结
前端·react.js
Tody Guo18 小时前
OpenClaw与企业微信的定时任务设定
前端·github·企业微信
张雨zy18 小时前
Vue 的 v-if 与 v-show,Android 的 GONE 与 INVISIBLE
android·前端·vue.js