Question

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

 import VueMq from 'vue-mq';

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

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

 {{ $mq }}

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

但是，如果我再次将其全部导入到该组件中，它将起作用。我得到了我期望的字符串-xsmall，small等。

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

如何在不导入每个组件的情况下使其全局运行？

Answer 1

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

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

export default VueMq

VueMq自定义断点和导入

1 个答案: