前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
镜宇秋霖丶2 分钟前
2026.5.12@霖宇博客制作中遇见的问题
前端·vue.js·elementui
醉逍遥neo16 分钟前
mac新电脑-前端开发配置
前端·macos·ghostty
白嫖叫上我1 小时前
Vue3封装主题色完善版
前端
a1117761 小时前
细胞结构实验室(react 开源)
前端·javascript·开源·html
aaaak_1 小时前
PDD 直播间 评论 , wss hex Protobuf 解析流程分析学习
java·前端·学习
ikoala1 小时前
用了几周明基 RD280UG,我终于明白程序员为什么需要一台“专用显示器”
前端·后端·程序员
Dxy12393102161 小时前
JS如何获取元素高度
开发语言·javascript·ecmascript
文心快码BaiduComate1 小时前
Comate搭载DeepSeek-V4
前端·后端
豹哥学前端1 小时前
5分钟搞懂事件委托
前端·javascript·面试
Awu12271 小时前
🍎把数学公式搬进 Web 表格:一个 VTable 实战案例
前端