前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
idcu2 分钟前
Lyt.js AI:让前端开发进入智能生成时代
前端
idcu3 分钟前
深入 Lyt.js 编译器:.lyt 文件如何增强 HTML 模板能力
前端
即答侠3 分钟前
实时 AI copilot 的 4 级 fallback 设计:用户感知 0 中断,SLA 从 92% 拉到 99.6%
前端·人工智能
无心使然5 分钟前
Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
前端·vue.js·数据可视化
Dxy123931021612 分钟前
HTML 如何设置 Div 阴影悬浮边框:从基础到进阶
前端·html·css3
好运的阿财13 分钟前
OpenClaw工具拆解之browser+agents_list
前端·人工智能·机器学习·开源软件·ai编程·openclaw·openclaw工具
JarvanMo19 分钟前
八个开源Flutter应用,让你成为更好的开发者
前端
ZC跨境爬虫25 分钟前
Apple官网复刻第二阶段day_2:(前端模块化还原苹果官网WATCH海报)
前端·ui·重构·html·状态模式
李李李勃谦27 分钟前
Vue3 + Electron + OpenHarmony 跨平台实战:从架构设计到 Markdown 编辑器完整实现
javascript·华为·electron·编辑器·harmonyos
Rabbit_QL29 分钟前
【前端基础】npm install 是干嘛的(带参数 vs 不带参数)
前端·npm·node.js