mediaQuery//存储媒体对象,对象中包含matches字段,为布尔值,匹配到为true,未匹配到为false
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)
}
},
版权声明:《 前端监听屏幕宽度尺寸变化(vue2) 》为胡光喆原创文章,转载请注明出处!
最后编辑:2023-8-30 08:08:33