通过 Vue 插件的方式来实现全局调用组件的功能

 

1、在组件中添加 show 和 hide 方法。

export default {
  methods: {
    show: function () {
      this.visible = true;
    },
    hide: function () {
      this.visible = false;
    }
  }
}

在上述代码中，我们在自定义组件中添加了 show 和 hide 方法，用于显示和隐藏组件。在 show 方法中，我们将组件的 visible 属性设置为 true，从而显示组件；在 hide 方法中，我们将组件的 visible 属性设置为 false，从而隐藏组件。

2、创建 Vue 插件，并在插件中注册自定义组件。

// 导入组件
import OverlayComponent from './OverlayComponent.vue';

// 定义插件对象
const OverlayPlugin = {
  install: function(Vue) {
    // 创建组件实例
    const OverlayConstructor = Vue.extend(OverlayComponent);
    const instance = new OverlayConstructor({
      el: document.createElement('div')
    });

    // 添加全局方法
    Vue.prototype.$overlay = {
      show: function() {
        instance.visible = true;
        document.body.appendChild(instance.$el);
      },
      hide: function() {
        instance.visible = false;
        document.body.removeChild(instance.$el);
      }
    };
  }
};

// 导出插件对象
export default OverlayPlugin;

　　

在上述代码中，我们首先导入了一个遮罩层组件 OverlayComponent，然后定义了一个插件对象 OverlayPlugin，它包含一个 install 方法，该方法接收 Vue 对象作为参数。在 install 方法中，我们通过 Vue.extend 方法创建了一个组件构造器 OverlayConstructor，然后创建了一个组件实例 instance，并将其挂载到一个新创建的 div 元素上。

在 show 方法中，我们将创建的遮罩层组件实例的 visible 属性设置为 true，表示需要显示遮罩层。然后将实例的 $el 元素添加到 body 元素中，从而实现显示遮罩层的功能。

在 hide 方法中，我们将遮罩层组件实例的 visible 属性设置为 false，表示需要隐藏遮罩层。然后将实例的 $el 元素从 body 元素中删除，从而实现隐藏遮罩层的功能。

3、只需在 Vue 实例中通过 Vue.use 方法引入该插件即可

import Vue from 'vue';
import OverlayPlugin from './OverlayPlugin.js';

Vue.use(OverlayPlugin);

new Vue({
  el: '#app',
  mounted() {
    // 在组件中可以通过 this.$overlay.show() 和 this.$overlay.hide() 调用全局方法
    this.$overlay.show();
    setTimeout(() => {
      this.$overlay.hide();
    }, 3000);
  }
});