前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
Bigger3 分钟前
第九章:我是如何剖析 Claude Code 的 CLI 里的安全沙盒与指令拦截机制的
前端·claude·源码阅读
得想办法娶到那个女人7 分钟前
Vue3 组合式API 标准写法(通俗易懂,可直接复制)
前端·javascript·vue.js
Reisentyan8 分钟前
[vue3]HTML Learn Data Day 10
javascript·vue.js·html
_深海凉_8 分钟前
LeetCode热题100-最长公共子序列
java·开发语言·前端
蓝天客11 分钟前
接入支付 FM 接口实战经验
前端
liyi_hz200813 分钟前
O2OA V10 升级说明(二)内容管理:更安全、更融合、更适配移动办公
java·前端·数据库
a11177613 分钟前
PascalEditor( 3D建筑编辑器 开源)
前端·开源·html
爱上好庆祝13 分钟前
移动端适配
前端·css·学习·html·css3
overmind14 分钟前
oeasy Python 123 元组_运算_封包解包_欢乐颂_大写数字
java·前端·python
暮雪倾风1 小时前
【JS-Node】node.js环境安装及使用
开发语言·javascript·node.js