前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
心运软件5 小时前
SpringBoot+ Vue校园社团管理平台的完整架构设计
vue.js·后端
敲代码的玉米C5 小时前
测试一直在写你的真实数据根
前端·人工智能·架构
执子念的飞鱼5 小时前
File Viewer 进入 2K 节点后,我更在意这 3 条回归
前端·typescript
richdata5 小时前
动态OTB vs 静态OTB:鞋服零售该选哪种管理模式?
前端·html·零售
Jodie同志5 小时前
第16~23天:持久化、HITL、流式、MCP与安全
前端·后端·agent
Jodie同志5 小时前
第1~15天:原生Agent、RAG与LangGraph基础(完整代码实操)
前端·后端·agent
sunly_5 小时前
React useActionState 的用法详解
前端·javascript·react.js
今日无bug5 小时前
RESTful + Interface:从 todos 项目理解后端接口设计
前端·restful
用户69371750013846 小时前
#DeepSeek+Pi‑Agent 王炸组合跑赢 Claude‑Code!
前端·人工智能·后端
前端一课6 小时前
我还在上班,怎么做一个长期有价值的号
前端