前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
干前端3 分钟前
Vue3 组件库实战(六):从本地到 NPM,Vue 组件库工程化构建与打包全指南(上)
前端·vue.js·npm
fjhcom4 分钟前
PDF与图片互转WEB应用开发教程
前端·pdf·图片·web应用·streamlit
云原生指北5 分钟前
记忆不上云:mem9 + TiDB 打造 OpenClaw 私有记忆中枢
前端
IT_陈寒5 分钟前
Vite vs Webpack终极对决:5个关键指标告诉你谁更快?
前端·人工智能·后端
Moment7 分钟前
2026 年前端 Agent 框架选型:Mastra 与 LangChain 该怎么选
前端·后端·面试
喵叔哟8 分钟前
10. 【Blazor全栈开发实战指南】--JavaScript调用Blazor
开发语言·javascript·windows·udp
云浪11 分钟前
5 分钟入门 fetch
前端·javascript
晓得迷路了17 分钟前
栗子前端技术周刊第 120 期 - Vite 8.0、Solid v2.0.0 Beta、TypeScript 6.0 RC...
前端·javascript·vite
学习3人组18 分钟前
PowerShell 执行策略限制导致的 `npm` 命令无法运行的安全错误
前端·安全·npm
optimistic_chen23 分钟前
【Vue入门】组件及组件化
前端·javascript·vue.js·html·组件