Vue implementiert Dialogkapselung

<Vorlage>
  <el-dialog :title="Titel" :visible.sync="sichtbar" an Text anhängen>
    <!-- Geschäftscode -->
  </el-dialog>
</Vorlage>

<Skript>
Standard exportieren {
  props: ['onOk', 'Andere vom Unternehmen benötigte Eigenschaften'],
  Daten() {
    zurückkehren {
      sichtbar: false
    }
  }
}
</Skript>

konstanter Mixin = {
  montiert() {
    Dokument.Body.AnhängenKind(dies.$el)
    dies.sichtbar = wahr
  },
  betrachten:
    sichtbar(Wert) {
      // Zerstöre die Instanz, nachdem die Animation endet if (value === false) {
        setzeTimeout(() => {
          dies.$zerstören()
          wenn (dies.$el && dies.$el.parentNode) {
            dies.$el.parentNode.removeChild(dies.$el)
          }
        }, 400)
      }
    }
  }
}

Standard exportieren {
  installieren(Vue, Optionen) {
    Vue.prototype.$dialog = (Name, Eigenschaften) => {
      // Relativ zum Speicherort des Plugins wird import('../components/dialogs/' + name) während der statischen Kompilierung überprüft
        .dann(Modul => {
          const-Komponente = Modul.Standard
          const mixins = Komponente.mixins || []
          mixins.push(mixin) // Automatisch öffnen, Lebenszyklusfunktionen und Zerstörungsvorgänge dynamisch einmischen component.mixins = mixins
          gibt Vue.extend(Komponente) zurück
        })
        .then(Dialog => {
          const dialog = neuer Dialog({
            propsData: Requisiten || {}
          })
          dialog.$mount()
        })
    }
  }
}

dies.$dialog('GroupEdit.vue', {
  Typ: 'Bearbeiten',
  Gruppe: {},
  beiOk: () => {
    diese.freshList()
  }
})

importiere { createApp, defineComponent } aus 'vue'
Importieren Sie ElementPlus von „element-plus“.

konstanter Mixin = {
  montiert() {
    Dokument.Body.AnhängenKind(dies.$el)
    dies.sichtbar = wahr
  },
  betrachten:
    sichtbar(Wert) {
      // Zerstöre die Instanz, nachdem die Animation endet if (value === false) {
        setzeTimeout(() => {
          dies.$.appContext.app.unmount()
        }, 400)
      }
    }
  }
}

Standard exportieren {
  installieren(App) {
    app.config.globalProperties.$dialog = (Name, Eigenschaften) => {
      importiere('../Komponenten/Dialogfelder/' + Name)
        .dann(Modul => {
          const-Komponente = Modul.Standard
          let mixins = Komponente.mixins || []
          mixins.push(mixin)
          Komponente.mixins = Mixins

          returniere defineComponent(Komponente).
        })
        .then(Dialog => {
          const app = createApp(Dialog, props || {})
          app.use(ElementPlus)
          app.mount(Dokument.ErstellenElement('div'))
        })
    }
  }
}

<Vorlage>
  <Router-Ansicht></Router-Ansicht>
  <Komponente: ist = "currentDialog" v-bind = "currentDialogProps" />
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      currentDialog: null,
      currentDialogProps: null
    }
  }
}
</Skript>

const app = createApp(App)
const vm = app.mount('#app')

initDialog(app, vm)

Funktion initDialog(App, VM) {
  konstanter Mixin = {
    montiert() {
      dies.sichtbar = wahr
    },
    betrachten:
      sichtbar(Wert) {
        // Zerstöre die Instanz, nachdem die Animation endet if (value === false) {
          setzeTimeout(() => {
            this.$root.currentDialog = null
            dies.$root.currentDialogProps = {}
          }, 400)
        }
      }
    }
  }

  app.config.globalProperties.$dialog = (Name, Eigenschaften) => {
    importiere('./components/dialogs/' + name).then(module => {
      const-Komponente = Modul.Standard
      let mixins = Komponente.mixins || []
      mixins.push(mixin)
      Komponente.mixins = Mixins
      // defineComponent(component) wird nicht benötigt
      vm.currentDialog = markRaw(Komponente)
      vm.currentDialogProps = markRaw(props || {})
    })
  }
}

vm.$.appContext.app == app

app._instance.proxy == vm
app._instance.root.proxy == vm
app._instance.ctx.$root == vm

const app = createApp(App)
const vm = app.mount('#app')

wenn (Prozess.Umgebung.NODE_ENV === 'Produktion') {
  app._instance = {
    Proxy: VM,
    Wurzel: {
      Proxy: vm
    },
    ctx: {
      $root:vm
    }
  }
}