Enquire.js最初不匹配,仅在调整大小时

时间:2016-03-31 13:50:37

标签: javascript media-queries vue.js enquire.js

我正在使用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的beforeCompilecreated挂钩(而不是ready)都没有运气。

2 个答案:

答案 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