前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
是上好佳佳佳呀1 分钟前
【前端(十二)】JavaScript 函数与对象笔记
前端·javascript·笔记
你真的快乐吗16 分钟前
@fuxishi/svg-icon:一个 Vue 3 svg本地图标+iconify图标组件库,让图标管理不再头疼
前端·vue.js·typescript
Rkgua22 分钟前
ESModule和Commonjs模块的区别
前端·javascript
江南十四行22 分钟前
ReAct Agent 基本理论与项目实战(二)
前端·react.js·前端框架
用户6000718191028 分钟前
【翻译】React 如何乱序流式输出 UI,却仍保持最终顺序
前端
江南十四行38 分钟前
AI Agent应用类型及Function Calling开发实战(三)
服务器·前端·javascript
yqcoder40 分钟前
JavaScript 数据类型全景图:从基础到进阶
开发语言·javascript·ecmascript
GISer_Jing41 分钟前
AI原生全栈架构理论体系:从分布式范式演进到全链路工程化理论基石
前端·人工智能·学习·ai编程
GISer_Jing43 分钟前
从“切图仔”到“增长架构师”:AI时代营销前端的范式革命
前端·人工智能·ai编程
广州华水科技1 小时前
单北斗GNSS在水库变形监测中的应用与系统安装解析
前端