前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
弹简特3 分钟前
【Vue3速成】01-npm+vue初体验+vite构建vue工程化
vue.js·arcgis·npm
坚定信念,勇往无前21 分钟前
electron-vite 安装better-sqlite3
javascript·数据库·electron
@菜菜_达29 分钟前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong29 分钟前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong2334 分钟前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn37 分钟前
小程序开发:微信小程序与 uni-app 实战指南
前端
摸鱼小李上线了44 分钟前
vue项目页面添加水印实现方法
前端·javascript·vue.js
砍材农夫1 小时前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty
彩票管理中心秘书长1 小时前
智能体状态指示:何时思考、何时调用工具、何时出错
前端·后端·程序员
彩票管理中心秘书长1 小时前
React + TypeScript拆解一整套“AI 变现代码流程”
前端·后端·程序员