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)
}
},