Vueはダイアログのカプセル化を実装します

<テンプレート>
  <el-dialog :title="タイトル" :visible.sync="表示可能" 本文に追加>
    <!-- ビジネスコード -->
  </el-ダイアログ>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  props: ['onOk', 'ビジネスに必要なその他のプロパティ'],
  データ（） {
    戻る {
      表示: 偽
    }
  }
}
</スクリプト>

const ミックスイン = {
  マウント() {
    document.body.appendChild(this.$el)
    this.visible = true
  },
  時計：
    表示(値) {
      // アニメーション終了後にインスタンスを破棄する if (value === false) {
        タイムアウトを設定する(() => {
          これを破棄します。
          if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el)
          }
        }, 400)
      }
    }
  }
}

エクスポートデフォルト{
  インストール(Vue, オプション) {
    Vue.prototype.$dialog = (名前、プロパティ) => {
      // プラグインの場所を基準に、静的コンパイル時に import('../components/dialogs/' + name) がチェックされます
        .then(モジュール => {
          const コンポーネント = module.default
          const ミックスイン = コンポーネント.ミックスイン || []
          mixins.push(mixin) // 自動的に開き、ライフサイクル関数と破棄操作を動的にミックスインします。component.mixins = mixins
          Vue.extend(コンポーネント) を返します
        })
        .then(ダイアログ => {
          const ダイアログ = 新しいダイアログ({
            propsData: props || {}
          })
          ダイアログ.$mount()
        })
    }
  }
}

this.$dialog('GroupEdit.vue', {
  タイプ: '編集'、
  グループ： {}、
  オンOK: () => {
    this.freshList()
  }
})

'vue' から {createApp、defineComponent} をインポートします。
'element-plus' から ElementPlus をインポートします

const ミックスイン = {
  マウント() {
    document.body.appendChild(this.$el)
    this.visible = true
  },
  時計：
    表示(値) {
      // アニメーション終了後にインスタンスを破棄する if (value === false) {
        タイムアウトを設定する(() => {
          this.$.appContext.app.unmount()
        }, 400)
      }
    }
  }
}

エクスポートデフォルト{
  インストール(アプリ) {
    app.config.globalProperties.$dialog = (名前、プロパティ) => {
      インポート('../components/dialogs/' + 名前)
        .then(モジュール => {
          const コンポーネント = module.default
          mixins = component.mixins || [] とします。
          mixins.push(ミックスイン)
          コンポーネント.mixins = ミックスイン

          defineComponent(コンポーネント) を返します
        })
        .then(ダイアログ => {
          const app = createApp(ダイアログ、props || {})
          app.use(ElementPlus)
          app.mount(document.createElement('div'))
        })
    }
  }
}

<テンプレート>
  <ルータービュー></ルータービュー>
  <component :is="currentDialog" v-bind="currentDialogProps" />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      現在のダイアログ: null、
      現在のダイアログプロパティ: null
    }
  }
}
</スクリプト>

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

initDialog(アプリ、vm)

関数 initDialog(app, vm) {
  const ミックスイン = {
    マウント() {
      this.visible = true
    },
    時計：
      表示(値) {
        // アニメーション終了後にインスタンスを破棄する if (value === false) {
          タイムアウトを設定する(() => {
            this.$root.currentDialog = null
            this.$root.currentDialogProps = {}
          }, 400)
        }
      }
    }
  }

  app.config.globalProperties.$dialog = (名前、プロパティ) => {
    import('./components/dialogs/' + name).then(module => {
      const コンポーネント = module.default
      mixins = component.mixins || [] とします。
      mixins.push(ミックスイン)
      コンポーネント.mixins = ミックスイン
      // defineComponent(component) は必要ありません
      vm.currentDialog = markRaw(コンポーネント)
      vm.currentDialogProps = markRaw(props || {})
    })
  }
}

vm.$.appContext.app == アプリ

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

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

process.env.NODE_ENV === 'production'の場合{
  アプリ._インスタンス = {
    プロキシ: vm、
    根： {
      プロキシ: vm
    },
    ctx: {
      $ルート:vm
    }
  }
}