Блог

Я хочу создать плагин для своих пользовательских диалоговых окон, чтобы вызывать их за пределами дерева Vue. Плагин будет создавать и монтировать их в DOM. Как я могу включить контекст, используемый для приложения, в свой пользовательский компонент? (например, i18n, vuetify, маршрутизатор и т. Д.)

 import Vuetify from "./vuetify";
import DialogError from "../components/Dialog.vue";

function install(Vue, globalOptions = {}) {
  const DialogErrorConstructor = Vue.extend(DialogError);
  const property = globalOptions.property || "$dialogs";

  function createCmp(ComponentConstructor, options) {
    const component = new ComponentConstructor();

    const vuetifyObj = Vuetify;
    component.$vuetify = vuetifyObj.framework;

    const componentOptions = {
      ...Vue.prototype[property].globalOptions,
      // I tried to include prototype to component, but that's not work
      // ...Vue.prototype,
      ...options
    };

    if (componentOptions.slot) {
      component.$slots.default = componentOptions.slot;
      delete componentOptions.slot;
    }

    Object.assign(component, componentOptions);
    document.body.appendChild(component.$mount().$el);
    return component;
  }

  function showErrorDialog() {
    createCmp(DialogErrorConstructor);
  }

  Vue.prototype[property] = Object.assign({ showErrorDialog });
}

// eslint-disable-next-line @typescript-eslint/no-empty-function
function CustomDialogs() {}
CustomDialogs.install = install;

export default CustomDialogs;
 

Вот пример того, что я пробовал (CodeSandbox). Если вы раскомментируете $t (i18n vue lib), который работает в главном приложении, диалоговое окно прекратит визуализацию. Я не могу понять, почему это происходит. Я попытался добавить методы прототипа Vue в созданный компонент, но это не работает. Каким-то образом я добавил Vuetify, но это не идеальный вариант, и другие плагины не работают внутри этого компонента, как с i18n, маршрутизатором и т. Д.

Вот ошибка с визуализацией компонента: