関数でANt-design-vueのDrawerコンポーネントとModalコンポーネントを作成します.

原因
通常業務においては、引き出しのセットやフレームのセットを書くときは、visible属性で表示を制御します.

export default {
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
};

このような書き方はコンポーネントが簡単で、論理が少ない時がいいです.このページにはたくさんのボックスがあります.あるいは、現在のページのコンポーネント自体が複雑なとき、各種のisXvisibleが現在のページに溢れています.見ているだけでは維持できません.
もう一つのシーンがあります.リストには詳細ボタンがあります.クリックして詳細な引き出しを開けます.この詳細な引き出しの中にはもう一つのリストがあります.他の詳細な引き出しも開けます.これを類推します.開けたい弾戸の数が確定できないと、父のセットの中に弾戸を書いておくことができません.
論理的には、このような1つの変数でコンポーネントの顕著な隠蔽を制御する方法は、現在のコンポーネントのサブコンポーネントとして、ポップアップウィンドウまたは引き出しコンポーネントを使用することである.しかし、ほとんどの場合は、弾戸や引き出しの内容は元のコンポーネントとあまり関係がありません.例えば、引き出しが開いている詳細ページ、例えば弾戸が開いているフォームなど、論理的には独立したサブアプリケーションのように、このサブアプリケーションは親アプリケーションからのパラメータを受信しますが、その後のページ全体のコントロールはこのサブアプリケーションに任せるべきです.(パチンコや引き出し)、メインアプリケーションは、サブアプリケーションが終了したイベント(コールバックの結果)をモニターして対応するものであるべきです.
したがって、私の考えは、関数を呼び出して、いくつかの対応するpropsパラメータを入力して、パチンコや引き出しを作成し、リプライ関数を提供しながら、パチンコの結果やキャンセル時に応答するということです.これにより、親のコンポーネントとは関係のない論理を多く書くことなく、パチンコの論理を弾戸コンポーネントに集めることができます.
関数の使い方
1.createAntdDrawer
デフォルトでは、titleとcontentの2つのSLotスロットにcloseという関数が入ってきます.サブコンポーネント内でthis.$emit('close', payload)を使用して、クローズ動作をトリガします.

createAntdDrawer({
  // antd drawer    props
  drawerProps: {},
  // title slot
  // drawerProps.title   title       ，     title
  title: {
    template: Title,
    props: {
      title: '       ',
    },
  },
  // default slot
  content: {
    template: HelloWorld,
    props: {
      msg: 'Welcome to Your Vue.js App',
    },
  },
  //         async
  beforeClose: function() {
    console.log('     ');
  },
  //         async
  afterClose: function() {
    console.log('      ');
  },
});

2.createAntdModal
title、content、およびfooterの3つのSLotスロットにclose、okの2つの関数とconfirmLoadingの状態が入ってきます.この状態は、サブアセンブリ内でthis.$emit('close', payload)を使用して、オフ動作をトリガし、this.$emit('ok', payload)を使用して、onOkを回転させます.

createAntdModal({
  // antd modal    props
  modalProps: {},
  // title slot
  // modalProps.title   title       ，     title
  title: {
    template: Title,
    props: {
      title: '       ',
    },
  },
  // content slot
  content: {
    template: HelloWorld,
    props: {
      msg: 'Welcome to Your Vue.js App',
    },
  },
  // footer slot
  footer: {
    template: Footer,
    props: {
      cancelText: 'hahah  ',
      okText: 'hahah  ',
    },
  },
  //         async
  beforeClose: function() {
    console.log('     ');
  },
  //         async
  afterClose: function() {
    console.log('      ');
  },
  //          async
  async onOk() {
    await new Promise((resolve) => {
      setTimeout(() => {
        console.log('    ');
        resolve();
      }, 3000);
    });
  },
});

gitアドレス
https://github.com/hzyhbk/cre...
cloneの全体の項目は、下の依存をインストールして、confirmLoading、トップページで2つのボタンを見ることができます.クリックして効果を見ることができます.
スターを歓迎します.