前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
huabuyu几秒前
将 Markdown 转为 AST:实现思路与实战解析
前端
前端Hardy6 分钟前
惊艳同事的 Canvas 事件流程图,这篇教会你
前端·javascript·css
哔哩哔哩技术8 分钟前
KMP on iOS 深度工程化:模块化、并发编译与 98% 增量构建加速
前端
神仙别闹15 分钟前
基于 Vue+SQLite3开发吉他谱推荐网站
前端·vue.js·sqlite
Async Cipher18 分钟前
CSS 居中
前端·css·css3
IT_陈寒43 分钟前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
华仔啊43 分钟前
别再被 Stream.toMap() 劝退了!3 个真实避坑案例,建议收藏
javascript·后端
华仔啊1 小时前
别再写 TypeScript enum了!新枚举方式让 bundle 瞬间小20%
javascript·typescript
方安乐1 小时前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23331 小时前
Vue 3.5 升级指南
前端·vue.js