前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
u***u6857 分钟前
前端组件单元测试模拟,Jest mock函数
前端·单元测试
前端摸鱼匠27 分钟前
Vue 3 的watchEffect函数:介绍watchEffect的基本用法和特点
前端·javascript·vue.js·前端框架·ecmascript
拉不动的猪1 小时前
基本数据类型Symbol的基本应用场景
前端·javascript·面试
天庭鸡腿哥1 小时前
谷歌出品,堪称手机版PS!
javascript·智能手机·eclipse·maven
_小九1 小时前
【开源】耗时数月、我开发了一款功能全面【30W行代码】的AI图床
前端·后端·开源
just小千1 小时前
HTML进阶——常用标签及其属性
前端·html
惜.己1 小时前
html笔记(一)
前端·笔记·html
Lsx-codeShare1 小时前
一文读懂 Uniapp 小程序登录流程
前端·javascript·小程序·uni-app
曹牧1 小时前
HTML实体名称
前端·html