0

我想在我的 Vue.js(v 2.0) 项目中使用 Enquire.js。互联网上有很多用户将 Inquire 与 Vue.js 集成的示例。例如这里:https ://jsfiddle.net/Linusborg/843dk9zs/

当我将 Enquire.js 集成到我的 Vue.js/webpack 项目中时,它不起作用并且在控制台中根本没有给出任何错误消息。我不知道我在这里做错了什么。

这是我的代码,位于 main.js 我的应用程序的根文件中。

import Vue from 'vue'
import Enquire from 'enquire.js' //installed using NPM
require('./stylesheet.css')

new Vue({
  el: "#app",
  data: {
    displayIsLarge: false,
    displayIsSmall: true
  },
  ready: function() {
    var self = this;
    // Listen for changes in the browser's size
    enquire.register("screen and (max-width:400px)", {
      match: function() {
        self.displayIsSmall = true;
        console.log("the screen is now small");
      },
      unmatch: function() {
        self.displayIsLarge = true;
        console.log("the screen is now large");
      }
    })
  }
4

0 回答 0