我正在使用Enquire.js和 Vue.js 进行媒体查询。当我手动调整浏览器窗口大小时,这一切都很有效。但是,我在文档加载方面没有匹配,这是在开启 Chrome的切换设备模式时或在移动电话上访问网站时最明显的奇怪行为。我使用"Match & Unmatch Example"进行了检查,并且在所述模式下或使用移动电话访问时,它按预期工作。我想知道 Vue.js 和 Enquire.js 之间是否存在某种不兼容或我做错了什么?
媒体查询的逻辑在我的vue实例的挂钩上:
ready:
function () {
var self = this;
enquire.register("screen and (max-width: 400px)", {
match: function () {
self.displayIsLarge = false;
self.displayIsSmall = true;
},
unmatch: function () {
self.displayIsLarge = true;
self.displayIsSmall = false;
}
})
);
在我的vue实例上,我有以下数据属性:
var menu = new Vue({
el: '#app',
data: {
displayIsLarge: true,
displayIsSmall: false,
在我的html文件中,我使用v-if="displayIsSmall"
和v-if="displayIsLarge"
根据浏览器的大小隐藏/显示元素。 JsdFiddle here。
与此同时,我可以用Setup
回调来解决这个问题,或许有条件的,这样的事情:
enquire.register("screen and (max-width: 400px)", {
setup: function() {
if (this.match) {
self.displayIsSmall = true;
}
else {
self.displayIsSmall = false;
}
},
match: function () {
self.displayIsLarge = false;
self.displayIsSmall = true;
},
unmatch: function () {
self.displayIsLarge = true;
self.displayIsSmall = false;
}
})
这不按预期工作。我错过了什么? JsdFiddle here。
更新
Vue的beforeCompile或created挂钩(而不是ready
)都没有运气。
答案 0 :(得分:3)
unmatch
只有从match
转到unmatch
才会发生。因此,直到你低于400px然后回到它之前它才会发生。我建议您采用移动优先方法,并做一些类似的事情。
new Vue({
el: '#app',
data: {
displayIsLarge: false,
displayIsSmall: true
},
ready: function () {
var self = this;
enquire.register("screen and (min-width: 400px)", {
match: function () {
self.displayIsLarge = true;
self.displayIsSmall = false;
},
unmatch: function () {
self.displayIsLarge = false;
self.displayIsSmall = true;
}
})
}
})
这是一个小型演示:https://jsfiddle.net/crswll/uc7gaec0/
但是,根据这些元素实际包含和/或执行的内容,使用CSS直观地切换它们可能更有意义。不过,你知道发生了什么比我更好。
答案 1 :(得分:0)
除了确保我在页面加载时match
,而且不仅在调整大小后(如上面的答案中所详述),我必须在{{1}中添加<meta>
视口标记1}}。例如,添加以下元标记将强制视口缩放到设备的尺寸,现在呈现正确的样式(即移动):
index.html
<meta name="viewport" content="width=device-width, initial-scale=1">
会使页面宽度与设备宽度相等,而width=device-width
会在页面加载时设置初始缩放。
更多详情here。