Vue3使用 createApp 自定義通用Dialog的方法

更新時間：2024年01月16日 09:42:38 作者：小小楠瓜子

這篇文章主要介紹了Vue3使用 createApp 自定義通用Dialog的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、main.js 中定義通用方法

Vue.prototype.$dialog = {
    open(component, args) {
        return new Promise((resolve, reject) => {
            let Dialog = Vue.extend(component);
            var $vm = new Dialog({
                el: document.createElement("div"),
                router,
                store,
                eventBus: new Vue(),
            });
            var node = document.body.appendChild($vm.$el);
            $vm.open(args).then(
                result => {
                    if (resolve) {
                        resolve(result);
                    }
                    node.remove();
                    $vm.$destroy();
                },
                (arg) => {
                    if (reject) {
                        reject(arg)
                    }
                    node.remove();
                    $vm.$destroy();
                }
            );
        });
    }
};

二、定義通用 DialogLayout.vue

<template>
  <el-dialog :title="title" :visible.sync="visible" :center="center" :modal="true" :width="width"
    class="n-dialog-layout" :class="$slots.footer ? 'has-footer' : ''" :modal-append-to-body="true"
    :append-to-body="true" :lock-scroll="true" :show-close="showClose" :close-on-click-modal="false"
    :before-close="beforeClose" @opened="$emit('opened')" @close="handleClose" :fullscreen="fullscreen">
    <slot name="title" slot="title"></slot>
    <slot></slot>
    <slot name="footer" slot="footer"></slot>
  </el-dialog>
</template>
<script>
export default {
  name: "n-dialog-layout",
  props: {
    title: {},
    fullscreen: {
      default: false,
      type: Boolean,
    },
    width: {
      default: "50%",
      type: String,
    },
    showClose: {
      default: true,
      type: Boolean,
    },
    center: {
      default: false,
      type: Boolean,
    },
    beforeClose: {
      default: (done) => {
        done();
      },
      type: Function,
    },
  },
  data() {
    return {
      promise: null,
      resolve: null,
      reject: null,
      visible: false,
      confirmClose: false,
      result: {},
    };
  },
  methods: {
    open() {
      this.confirmClose = false;
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
        this.visible = true;
      });
      return this.promise;
    },
    close(result) {
      this.confirmClose = true;
      this.result = result;
      this.visible = false;
    },
    cancel(arg) {
      this.confirmClose = false;
      this.result = arg;
      this.visible = false;
    },
    handleClose() {
      if (this.confirmClose) {
        this.resolve(this.result);
      } else {
        this.reject(this.result);
      }
    },
  },
};
</script>

三、定義需要通過 Dialog 打開的具體頁面

<template>
  <n-dialog-layout :title='l("ChangePassword")' ref="dialog">
    <div class="info" v-loading="loading">
      <el-form ref="passwordForm" status-icon size="large" :model="item" label-width="100px" label-position="top"
        class="m-b" :rules="rules">
        <el-form-item :label="l('CurrentPassword')" prop="currentPassword">
          <el-input type="password" v-model="item.currentPassword"></el-input>
        </el-form-item>
        <el-form-item :label="l('NewPassword')" prop="password">
          <el-input type="password" v-model="item.password"></el-input>
        </el-form-item>
        <el-form-item :label="l('NewPasswordRepeat')" prop="confirmPassword">
          <el-input type="password" v-model="item.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template slot="footer">
      <span class="dialog-footer">
        <el-button @click="cancel()" size="large">{{ l('Cancel') }}</el-button>
        <el-button type="primary" @click="ok()" size="large">{{ l('Save') }}</el-button>
      </span>
    </template>
  </n-dialog-layout>
</template>

四、具體使用

import ChangePasswordDialog from './dialog/changePassword';
this.$dialog.open(ChangePasswordDialog).then(res => {
	this.save();
})

五、如何用 Vue3 的語法來重寫 main.js 中的 $dialog 方法？

app.config.globalProperties 代替 Vue.prototype;
用什么來代替 Vue.extend 呢？這里使用的 createApp;
createApp 代替 Vue.extend 以后遇到的問題，例如：無法使用 ElementPlus 的UI控件、無法解析全局注冊的組件

問題1：無法使用 ElementPlus 的UI控件、無法解析全局注冊的組件
回答：使用 createApp 創(chuàng)建出來的應用實例，use ElementPlus，register 里面是我放的全局通用方法和組件
問題2：為什么Dialog.mount 的節(jié)點是寫死的？而不是動態(tài) document.createElement ?
回答：實踐過程中發(fā)現(xiàn) document.createElement 通過 proxy.$dialog.open(ChangePasswordDialog) 打開正常，但是加上 .then() 就會出現(xiàn)關閉兩次才可以正常關閉的情況

createdApp 代替 Vue.extend 實現(xiàn)創(chuàng)建一個“子類”，實現(xiàn)同樣的效果，先看代碼

app.config.globalProperties.$dialog = {
  open(component, args) {
    return new Promise((resolve, reject) => {
      const Dialog = createApp(component);
      Dialog.use(ElementPlus);
      Dialog.use(register);
      const $vm = Dialog.mount("#Dialog");
      const node = document.body.appendChild($vm.$el);
      $vm.open(args).then(
        (result) => {
          if (resolve) {
            resolve(result);
          }
          node.remove();
        },
        (arg) => {
          if (reject) {
            reject(arg);
          }
          node.remove();
        }
      );
    });
  },
};

具體效果如下

比較靈活，可插拔的通用Dialog

到此這篇關于Vue3 如何優(yōu)雅的使用 createApp 自定義通用Dialog的文章就介紹到這了,更多相關Vue3自定義通用Dialog內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3中的reactive、readonly和shallowReactive使用詳解
在 Vue3 中,可以使用 shallowReactive 函數(shù)創(chuàng)建一個淺層響應式對象,它接收一個普通對象作為參數(shù),返回一個淺層響應式代理對象,本文給大家介紹vue3中的reactive、readonly和shallowReactive使用,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue中實時監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關于vue中如何實時監(jiān)聽div元素盒子的寬高的相關資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下
2023-09-09
在vue中使用echarts實現(xiàn)飛機航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實現(xiàn)飛機航線?水滴圖?詞云圖,通過引入中國地圖JS文件，會自動注冊地圖，文中結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-08-08
Vue項目中props傳值時子組件檢測不到的問題及解決
這篇文章主要介紹了Vue項目中props傳值時子組件檢測不到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
ejsExcel模板在Vue.js項目中的實際運用
這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Vue的diff算法原理你真的了解嗎
這篇文章主要為大家詳細介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue?element?ui用戶展示頁面的實例
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
html頁面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue+Element UI實現(xiàn)概要小彈窗的全過程
彈窗效果是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，下面這篇文章主要給大家介紹了關于Vue+Element UI實現(xiàn)概要小彈窗的相關資料，需要的朋友可以參考下
2021-05-05
elementUI樣式修改未生效問題詳解(掛載到了body標簽上)
vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關于elementUI樣式修改未生效問題的相關資料,掛載到了body標簽上,需要的朋友可以參考下
2023-04-04