Question

我正在使用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）都没有运气。

Answer 1

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直观地切换它们可能更有意义。不过，你知道发生了什么比我更好。

Answer 2

除了确保我在页面加载时match，而且不仅在调整大小后（如上面的答案中所详述），我必须在{{1}中添加<meta>视口标记1}}。例如，添加以下元标记将强制视口缩放到设备的尺寸，现在呈现正确的样式（即移动）：

index.html

<meta name="viewport" content="width=device-width, initial-scale=1">会使页面宽度与设备宽度相等，而width=device-width会在页面加载时设置初始缩放。

更多详情here。

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

2 个答案: