前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
2301_796512523 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Grid 宫格(展示内容或进行页面导航)
javascript·react native·react.js·ecmascript·harmonyos
兰亭古墨5 分钟前
钉钉工作台自建组件定时器被禁?用 Swiper 模拟 setInterval 的优雅方案
前端·钉钉
夕除6 分钟前
js-20
开发语言·javascript·windows
@––––––13 分钟前
力扣hot100—系列8-回溯算法
javascript·算法·leetcode
phltxy15 分钟前
Vue核心进阶:v-model深度解析+ref+nextTick实战
前端·javascript·vue.js
三小河18 分钟前
React 样式——styled-components
前端·javascript·后端
Hi_MrXiao23 分钟前
电脑上安装使用多个版本的谷歌浏览器
前端·chrome
广州华水科技24 分钟前
单北斗GNSS变形监测一体机在大坝安全监测中的应用探索
前端
colicode26 分钟前
C++语音验证码接口API示例代码详解:高性能C++语音校验接入Demo
前端·c++·前端框架·语音识别
We་ct28 分钟前
LeetCode 92. 反转链表II :题解与思路解析
前端·算法·leetcode·链表·typescript