前端监听屏幕宽度尺寸变化(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)
      }
  },
相关推荐
比特森林探险记5 分钟前
React基础:语法、组件与JSX
前端·javascript·react.js
宁雨桥25 分钟前
Vue项目中iframe嵌入页面实现免登录的完整指南
前端·javascript·vue.js
css趣多多26 分钟前
Elment UI 布局组件
javascript
无法长大28 分钟前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
LongJ_Sir31 分钟前
Cesium--可拖拽气泡弹窗(对话框尾巴,Vue3版)
前端·javascript·vue.js
im_AMBER33 分钟前
消失的最后一秒:SSE 流式联调中的“时序竞争”
前端·笔记·学习·http·sse
GDAL38 分钟前
Electron IPC 通信深入全面讲解教程
javascript·electron
RFCEO40 分钟前
前端编程 课程十、:CSS 系统学习学前知识/准备
前端·css·层叠样式表·动效设计·前端页面布局6大通用法则·黄金分割比例法则·设计美观的前端
白日梦想家68140 分钟前
深入浅出 JavaScript 定时器:从基础用法到避坑指南
开发语言·javascript·ecmascript
雄狮少年41 分钟前
简单react agent(没有抽象成基类、子类,直接用)--- 非workflow版 ------demo1
前端·react.js·前端框架