前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
问心无愧05133 小时前
ctf show web入门160 161
前端·笔记
李小白663 小时前
第四天-WEB服务器基本原理,IIS服务
运维·服务器·前端
humcomm4 小时前
AI编程时代新前端职位
前端·ai编程
好家伙VCC4 小时前
Web Components主题热切换方案揭秘
java·前端
甲维斯5 小时前
Kimi版超级玛丽效果“惊人”,配额不足5厘米!
前端·人工智能
hboot5 小时前
AI工程师第一课 - Python
前端·后端·python
凉菜凉凉5 小时前
AI时代,被抛弃的前端
前端·ai
console.log('npc')5 小时前
AI前端工程与生成式UI学习路线
前端·人工智能·ui
huangdong_5 小时前
淘宝商品SKU图自动分类技术深度解析:从DOM解析到智能归档
开发语言·javascript·ecmascript
梦曦i5 小时前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app