我想在我的 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");
}
})
}