Vue3を使用してjsで呼び出せるコンポーネントを実装する

序文

コンポーネントライブラリは基本的にプロジェクト開発で使用されますが、特にメッセージプロンプトポップアップや確認ポップアップの場合、設計案のスタイルや機能はコンポーネントライブラリのものと同じではない場合があります。プロジェクトやデザイナーごとに独自のスタイルがあります。ただし、コンポーネントライブラリ内のコンポーネントを使用してスタイルをオーバーライドすることは可能です。ただし、一部のカスタマイズされた機能は、変更が簡単ではありません。この場合、カスタムコンポーネントを選択し、コンポーネント属性を通じてページに導入し、タグ呼び出しを明示的に記述します。ユーザーに簡単なプロンプトや操作を提供するメッセージプロンプトの場合、最も一般的に使用される UI ライブラリは、js 呼び出しを通じて同様の機能をサポートしています。 UI ライブラリの呼び出しメソッドを参照して、js 関数によって呼び出されるカスタムコンポーネントを実装することもできます。

1. 従来のVueコンポーネント

確認ボックスを実装し、ボタンをクリックして確認ボックスを開き、確認ボックスの [OK] ボタンと [キャンセル] ボタンをクリックして確認ボックスを閉じ、対応するメソッドを呼び出す必要があるとします。

1. メインコンポーネントコード:

src/components/Confirm/Confirm.vue

2. 使用方法

3. 成果を達成する

2. js呼び出しコンポーネントへの変更

上記のコンポーネント呼び出し方法は非常に面倒です。さまざまな操作のコールバックの導入と処理の両方が必要です。また、コンポーネントの DOM ノードが現在のページの下に挿入され、スタイルがコンポーネントの内容によって上書きされたり、他の要因の影響を受けたりする可能性があります。

達成したい結果は、js 関数を介してコンポーネントを呼び出し、関数が promise を返し、then を確認して、catch をキャンセルすることです。次に例を示します。

確認する（{
  タイトル： ''、
  メッセージ： ''
}).then(() => {
  // クリックして確認}).catch(() => {
  // クリックしてキャンセル })

1. 実装手順:

まず、Promise オブジェクトを返す必要があることを確認します。最初に promise オブジェクトを返すメソッドを作成します。
Vue の createApp メソッドを使用して、Confirm コンポーネントインスタンスを作成します。 createApp の 2 番目の引数を使用すると、コンポーネントに必要なデータを渡すことで、ルートプロパティをアプリケーションに渡すことができます。
コンポーネントインスタンスをマウントするためのコンテナーとして使用するノードを作成し、そのノードを本体に追加します。
作成されたノードにコンポーネントインスタンスをマウントすると、コンポーネントの親は本体になり、呼び出し元のページの影響を受けなくなります。
[OK] をクリックすると、resolve が呼び出され、現在のコンポーネントがアンインストールされ、DOM が削除されます。 [キャンセル] をクリックすると、拒否が呼び出され、現在のコンポーネントがアンインストールされ、DOM が削除されます。

2. 具体的な実装コード:

Confirm コンポーネントの js 部分を変更し、props から onConfirm と onCancel を渡して、コンポーネントインスタンスの使用を容易にします。

// src/components/Confirm/Confirm.vue
<スクリプト>
エクスポートデフォルト{
  名前: '確認'、
  小道具: {
    タイトル：
      タイプ: 文字列、
      デフォルト: 'prompt'
    },
    メッセージ： {
      タイプ: 文字列、
      デフォルト: 'デフォルトのプロンプトメッセージ'
    },
    確認ボタンテキスト: {
      タイプ: 文字列、
      デフォルト: 「確認」
    },
    キャンセルボタンテキスト: {
      タイプ: 文字列、
      デフォルト: 'キャンセル'
    },
    確認時: {
      タイプ: 関数、
      デフォルト: () => {}
    },
    キャンセル時: {
      タイプ: 関数、
      デフォルト: () => {}
    }
  }
}
</スクリプト>

同じディレクトリに新しい index.js ファイルを作成し、props を通じて onConfirm や onCancel などのパラメータをコンポーネントに渡すと、インスタンス内でイベントコールバックを受け取ることができます。

// src/components/Confirm/index.js
'vue' から {createApp} をインポートします。
'./Confirm' から Confirm をインポートします
関数 confirm ({ タイトル、メッセージ、confirmBtnText、cancelBtnText }) {
  新しい Promise を返します ((resolve, reject) => {
    // コンポーネントをインスタンス化します。createApp の 2 番目のパラメータは props です。
    const confirmInstance = createApp(確認、{
      タイトル: タイトル || 'ヒント',
      メッセージ: メッセージ || 'メッセージを確認',
      confirmBtnText: confirmBtnText || '確認',
      cancelBtnText: cancelBtnText || 'キャンセル',
      確認時: () => {
        アンマウント()
        解決する（）
      },
      キャンセル時: () => {
        アンマウント()
        拒否(新しいエラー())
      }
    })
    // コンポーネントをアンマウントする const unmount = () => {
      インスタンスのアンマウントを確認します。
      document.body.removeChild(親ノード)
    }
    // マウントコンテナを作成する const parentNode = document.createElement('div')
    document.body.appendChild(親ノード)
    //コンポーネントをマウントする confirmInstance.mount(parentNode)
  })
}

エクスポートデフォルト確認

コンポーネントの使用

設定 （） {
  const showConfirm = () => {
    確認する（{
      タイトル: 'タイトル',
      メッセージ: 'コンテンツ'
    }).then(() => {
      console.log('クリックして確認')
    }).catch(() => {
      console.log('キャンセルするにはクリックしてください')
    })
  }
  戻る {
    表示確認
  }
}

3. エフェクト表示を実現する

要約する

これで、Vue3 を使用して js から呼び出せるコンポーネントを実装する方法についての記事は終了です。Vue3 を使用して js から呼び出せるコンポーネントを実装する方法についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: