Vue3.0はドロップダウンメニューのカプセル化を実装します

<DropDown :title="'終了'" :list="メニューリスト" />

<ドロップダウン:title="'終了'">
   <drop-dowm-item>新しい記事を作成する</drop-down-item>
   <drop-dowm-item>記事の編集</drop-down-item>
   <drop-dowm-item>個人情報</drop-down-item>
</ドロップダウン>

<テンプレート>
  <div class="dropdown" ref="dropDownRef">
    <a
      @click.prevent="開く"
      class="btn btn-secondary ドロップダウントグル"
      href="#" rel="外部nofollow" 
    >
      {{ タイトル }}
    </a>
    <div class="dropdown-menu" :style="{ display: 'block' }" v-show="isOpen">
      <スロット></スロット>
    </div>
  </div>
</テンプレート>

<script lang="ts">
「vue」から、defineComponent、ref、onMounted、onUnmounted、watch } をインポートします。
「../hooks/useClickOutside」からuseClickOutsideをインポートします。
エクスポートデフォルトdefineComponent({
  名前:「ドロップダウン」、
  小道具: {
    タイトル：
      タイプ: 文字列、
      必須: true、
    },
  },

  セットアップ(コンテキスト) {
    定数isOpen = ref(false);
    //vue3.0 は DOM オブジェクトの参照を取得します。const dropDownRef = ref<null | HTMLElement>(null);
    const トグルオープン = () => {
      isOpen.value = !isOpen.value;
    };
    const handleClick = (e: マウスイベント) => {
      console.log(e.target, "e");
      if (dropDownRef.value) {
        console.log(dropDownRef.値);
        もし （
        //contains はノードにノードが含まれているかどうかを判定します!dropDownRef.value.contains(e.target as HTMLElement) &&
          isOpen.値
        ）{
          isOpen.値 = false;
        }
      }
    };
    マウント時(() => {
    //グローバル クリック イベントを登録します document.addEventListener("click", handleClick);
    });
    マウント解除時(() => {
    //バインド解除 document.removeEventListener("click", handleClick);
    }); 
    戻る {
      開いている、
      トグル開く、
      ドロップダウン参照、
    };
  },
});
</スクリプト>

<テンプレート>
  <li class="dropdowm-option" :class="{ 'is-disabled': 無効 }">
    <スロット></スロット>
  </li>
</テンプレート>
<スタイルスコープ>

/* ここがスロットを貫通させる必要がある場所です*/
.dropdowm-option.is-disabled >>> * {
  色: #6c757d;
  ポインタイベント: なし;
  背景色: 透明;
}
</スタイル>

<script lang="ts">
「vue」からdefineComponentをインポートします。

エクスポートデフォルトdefineComponent({
  小道具: {
    無効：
      タイプ: ブール値、
      デフォルト: false、
    },
  },
  設定（） {
    戻る {};
  },
});
</スクリプト>

'vue' から { ref, onMounted, onUnmounted,Ref } をインポートします。
const useClickOutside = (elementRef:Ref<null | HTMLElement>) => {
    定数isClickOutside = ref(false)
    const ハンドラ = (e: MouseEvent) => {
        console.log(要素参照値);
        if (要素参照値) {
            if (elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = false
            } それ以外 {
                isClickOutside.value = true
            }
        }
    }
    マウント時(() => {
      document.addEventListener("クリック", ハンドラー);
    });
    マウント解除時(() => {
      document.removeEventListener("click", ハンドラー);
    });
    isClickOutsideを返す
}

エクスポートデフォルトuseClickOutside

//既存のイベントロジックを削除します<script lang="ts">
... 
 定数isClickOutside = useClickOutside(dropDownRef);
    /* console.log(isClickOutside.value, "isClickOutside"); */
    //監視方法を導入し、データが変更されると、isOpen の値を false に変更します
    ウォッチ(isClickOutside, (newValue) => {
      if (isOpen.value && isClickOutside.value) {
        isOpen.値 = false;
      }
    });
 ...
</スクリプト>