时间戳

首页 > 解决方案 > VueMq 自定义断点和导入

javascript - VueMq 自定义断点和导入

问题描述

我导入并尝试在我的 main 中定义我的断点app.js

 import VueMq from 'vue-mq';

    Vue.use(VueMq, {
      breakpoints: {
        xsmall: 500,
        small: 768,
        medium: 1024,
        large: 1360,
        xlarge: 1800
      }
    });

它绑定到 Vue，Vue.use所以我应该能够$mq在任何组件中使用全局。

 {{ $mq }}

然而，这只是返回默认断点（平板电脑、笔记本电脑）而不是我的自定义断点。

但是，如果我在组件中再次导入它，它就可以工作。我得到了我期望的字符串 - xsmall、small 等。

import VueMq from 'vue-mq';
Vue.use(VueMq, {
  breakpoints: {
    xsmall: 500,
    small: 768,
    medium: 1024,
    large: 1360,
    xlarge: 1800
  }
});

我怎样才能让它在全球范围内工作而不必导入每个组件？

标签： javascriptvue.jsimportvuejs2

解决方案

尝试通过在组件的入口文件中添加功能安装来将此组件安装到 vue。如：

import VueMq from './vue-mq.vue'
const VueMq = {
    install: function(Vue){
        Vue.component('VueMq', VueMq)
    }
}

export default VueMq

推荐阅读