前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
AKclown11 分钟前
基于Monaco的diffEditor实现内容对比
前端·vue.js·react.js
Moonbit15 分钟前
MoonBit Pearls Vol.12:初探 MoonBit 中的 Javascript 交互
javascript·后端·面试
chenbin___23 分钟前
react native中 createAsyncThunk 的详细说明,及用法示例(转自通义千问)
javascript·react native·react.js
摆烂工程师24 分钟前
(2025年11月)开发了 ChatGPT 导出聊天记录的插件,ChatGPT Free、Plus、Business、Team 等用户都可用
前端·后端·程序员
gongzemin34 分钟前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户411800341534135 分钟前
Flutter课题汇报
前端
环信38 分钟前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua39 分钟前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
用户97141718142739 分钟前
前端开发中的跨域问题:Vite 开发环境配置指南
vue.js·vite
海云前端139 分钟前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端