vue+el-element でファイル名に応じてダイアログを動的に作成する実践

 <確認ダイアログ
     v-if="確認ダイアログ表示"
     :title="$t(`mineData.tips.deleteDataset`)"
     :visible.sync="ダイアログの表示を確認"
     @confirm="確認ハンドラー"
 </確認ダイアログ>

 メソッド: {
    近い（） {
        this.$emit("update:visible", false);
    },
    確認する（） {
        これを閉じます。
        this.$emit("確認");
    }
}

ダイアログを作成します("confirm-dialog.vue");

'vue' から Vue をインポートします
非同期関数createDialog（ファイル名、データ）{
  const ダイアログコンテキスト = require.context(
    '../components', // 検索ファイルの範囲を定義します true,
    /([a-zA-Z\-0-9]+)\.vue$/, // ファイル名ルール 'lazy' を定義する
  ）
  // 渡された名前のファイルを検索してロードします。let match = dialogsContext.keys().find((key) => key.includes(fileName))
  if (!match) を返す
  コンポーネントコンテキストをawait dialogsContext(match) にします。
  temp = componentContext.default とします
  新しいPromise(function(resolve,reject))を返す{
    // 設定パラメータを初期化する let opt ​​= {
      データ
    }
    コンポーネントをObject.assign({}, temp)とします。
    initData = {
      表示: true
    }
    オブジェクトにデータを割り当てます。
    opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))
    コンポーネント.データ = 関数 () {
      initDataを返す
    }
    // インスタンスを作成してマウントするためのコンストラクタを作成します。let DialogC = Vue.extend(component)
    ダイアログを新しいDialogC()にします
    // 閉じるイベント let _onClose = dialog.$options.methods.onClose
    ダイアログ.onClose = 関数 () {
      解決する（）
      ダイアログ.$destroy()
      _onClose && _onClose.call(ダイアログ)
      document.body.removeChild(ダイアログ.$el)
    }
    // コールバックイベント let _onCallback = dialog.$options.methods.onCallback
    dialog.onCallback = 関数 (...引数) {
      試す {
        _onCallback && _onCallback()
        解決(引数)
        ダイアログ.$destroy()
        _onClose && _onClose.call(ダイアログ)
        document.body.removeChild(ダイアログ.$el)
      } キャッチ (e) {
        コンソール.log(e)
      }
    }
    ダイアログ.$mount()
    // 閉じるボタンをクリックすると表示が変わります
    ダイアログ.$watch('visible', 関数(n, o) {
      ダイアログ === false && dialog.onClose()
    })
    document.body.appendChild(ダイアログ.$el)
  })
}

エクスポート {createDialog}

<テンプレート>
    <el-dialog title="プロンプト" :visible.sync="visible" width="30%">
        <span>Lorem、ipsum dolor sit amet consectetur adipisicing elit。Nesciunt quis
            perspiciatis fugiat molestiae provident accusantium repudiandae fugit について
            ミニマ、イーク、リペラト キブスダム イステ セッド 広告? デビティス クイ プレセンティウム
            マイナスインシデントエッセ！
        <span slot="フッター" class="ダイアログフッター">
            <el-button @click="onClose">キャンセル</el-button>
            <el-button type="primary" @click="onCallback(true)">OK</el-button>
        </span>
    </el-ダイアログ>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {}
  },
  メソッド: {
  }}
</スクリプト>

<テンプレート>
  <div>
    <h1>これはショーページです</h1>
    <el-button type="primary" @click="openDialog">開く</el-button>
  </div>
</テンプレート>

<スクリプト>
「@/utils/dialogControl」から createDialog をインポートします。
エクスポートデフォルト{
  メソッド: {
    オープンダイアログ() {
      ダイアログを createDialog("confirm-dialog.vue");
      ダイアログ.then((v) => {
        もし（動詞）{
          console.info("OK");
        }
      });
    },
  },
};
</スクリプト>