序文今日、プロジェクトを作成しているときに、カスタムの右クリック メニューが必要になることに気付きました。メニューにはサブメニューがあるので、このときは再帰コンポーネントが使用されます。そこで、再帰コンポーネントの作成プロセスを記録するためにこの記事を書きました。 1. 再帰コンポーネント再帰コンポーネントは、その名前が示すように、コンポーネント自体の中で自分自身を呼び出します。そこで、まずコンポーネントを構築し、その中で自分自身を呼び出します。一般的な再帰コンポーネントは、私たちのプロジェクトでよく使用されるツリー コンポーネントです。以下は、プロジェクト要件を満たすために実装した再帰コンポーネントのソース コードです。 <テンプレート> <ul class="リストコンテナ"> <li v-for="(item,index) in listData" :key="インデックス" class="リスト項目" @click.prevent.stop="handleClick($event,item)" @mouseover="childrenMenuIndex=インデックス" > <span class="list-item_span"> {{item.text}} </span> <CaretRightOutlined v-if="item.children" /> <!-- 自分自身を呼び出すかどうかを決定する --> <div v-if="item.children&&childrenMenuIndex===index" クラス="コンテキストメニューコンテキストメニュー_children" > <!-- コンポーネント自体を呼び出す --> <list-comp :list-data='item.children' @hideContextMenu='hideContextMenuEvent' /> </div> </li> </ul> </テンプレート> <スクリプト> 「vue」からdefineComponent、refをインポートします。 '@ant-design/icons-vue' から {CaretRightOutlined} をインポートします。 エクスポートデフォルトdefineComponent({ 名前:'リストコンプ', 小道具:{ リストデータ:{ タイプ:配列、 デフォルト:()=>[] } }, コンポーネント:{ 右矢印 }, 放出: 「コンテキストメニューを非表示」 ]、 セットアップ(props,{emit}){ //クリックイベント const handleClick=(event,{text,callBack})=>{ 出力('コンテキストメニューを非表示'); //callBack は渡されたコールバック関数です。渡された場合、カスタムコールバック関数が呼び出されます if (callBack) { 折り返し電話(); 戻る; } } const コンテキストメニューイベントを非表示にする=()=>{ 出力('コンテキストメニューを非表示'); } //現在選択されているメニュー項目を識別するために使用されます const childrenMenuIndex=ref(-1); const eventNames=['クリック','コンテキストメニュー']; マウント時(()=>{ イベント名.forEach(イベント名=>window.addEventListener(イベント名、hideContextMenuEvent)) }) マウント解除前に(()=>{ イベント名.forEach(イベント名=>window.removeEventListener(イベント名、hideContextMenuEvent)) }) 戻る { ハンドルクリック、 子メニューインデックス、 コンテキストメニューイベントを非表示にする } } }) </スクリプト> 予防
2. 右クリックメニューコンポーネント私のプロジェクトでは、コンポーネントを使用して右クリック メニューを実装します。もちろん、プラグインを通じて実装することもできます。ここでの右クリック メニューは、本質的には再帰コンポーネントの二次カプセル化です。実際、二次カプセル化は必要ありません。再帰コンポーネントを右クリック メニューとして直接使用できます。 <テンプレート> <テレポート先 = 'body' > <div class="content-menu_container" :style="styleObj"> <リスト要素 :list-data='メニューデータ' @hideContextMenu='windowClickHandler' /> </div> </テレポート> </テンプレート> <スクリプト> 「vue」からdefineComponentをインポートします。 「./list-comp.vue」からListCompをインポートします。 エクスポートデフォルトdefineComponent({ 名前:"コンテキストメニュー", コンポーネント:{ リストコンプ }, 小道具:{ スタイルオブジェクト:{ タイプ:オブジェクト、 デフォルト:()=>{} }, メニューデータ:{ タイプ:配列、 デフォルト:()=>[] } }, 出力:['closeContextMenu'], セットアップ(props,{emit}){ 定数windowClickHandler=()=>{ 出力('コンテキストメニューを閉じる') }; 戻る { ウィンドウクリックハンドラ、 } } }) </スクリプト> 予防 プロジェクト内で右クリック メニューを呼び出す場合は、まずウィンドウ自体の右クリック メニュー イベントを無効にする必要があります。次に、独自のカスタム メニュー イベントを実装します。実装コードを以下に示します。 const showContextMenu=(イベント)=>{ // デフォルトのイベントを無効にしてバブルを防止します。event.stopPropagation(); イベントをデフォルトにしない(); 状態.showContextMenu=true; 状態.styleObj={ 左:event.clientX+ "px", 上:event.clientY+'px' } } //ウィンドウ自体の右クリックメニューイベントを監視する onMounted(()=>{ window.addEventListener('コンテキストメニュー',showContextMenu) }) マウント解除前に(()=>{ window.removeEventListener('コンテキストメニュー',showContextMenu) }) 要約するこれで、vue3 再帰コンポーネント カプセル化に関するこの記事は終了です。vue3 再帰コンポーネント カプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL のデータ型とスキーマの最適化の詳細な説明
>>: Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...
<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...
目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...
最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...
今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...
まず、方法を理解します。 docker exec を使用して Docker コンテナに入るDocke...
バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...
1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...
1. concat() 関数機能: 複数の文字列を 1 つの文字列に連結する構文: concat(s...
目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...
はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...