Floating Vue 및 Tailwind가 포함된 Vue 드롭다운 메뉴

Vue 애플리케이션에서 툴팁, 팝오버 및 메뉴를 만드는 데 사용할 수 있는 가장 인기 있는 라이브러리 중 하나는 floating-vue 입니다. floating-vue가 Dropdown 구성 요소를 제공하지만 스타일을 지정하고 키보드 탐색과 같은 추가 기능을 추가하는 것은 사용자에게 달려 있습니다.

우리가 만들 것

Dropdown의 floating-vue 구성 요소를 기반으로 사용하고 그 위에 키보드 기능을 추가합니다. 그런 다음 해당 구성 요소를 사용하여 Tailwind를 사용하여 드롭다운 메뉴를 만듭니다.

최종 결과는 Bootstrap's Dropdown component 과 유사합니다.



그럼 시작하겠습니다!

드롭다운 구성요소

다행스럽게도 Vue.js는 ""기술을 사용하여 모든 구성 요소를 쉽게 확장할 수 있습니다. 따라서 최종 구성 요소에는 floating-vue 드롭다운의 모든 기능과 다음이 포함됩니다.

커서 위/아래 키를 사용하여 개별 드롭다운 항목 사이를 이동할 수 있는 기능

키보드 탐색에 사용되는 드롭다운 항목에 대한 사용자 정의 가능한 CSS 선택기

드롭다운 트리거에 포커스가 있을 때 Space 및 Enter 키를 사용하여 드롭다운을 열고 닫습니다

.

키보드로 메뉴를 탐색하는 동안 페이지 스크롤 방지

외부를 클릭하거나 Esc 키

를 사용하여 드롭다운을 닫습니다.
Dropdown.vue

<template>
  <FloatingVueDropdown ref="popoverRef" :distance="14" :triggers="['click']" theme="dropdown-menu" placement="bottom-start" auto-hide @show="onShow" @hide="onHide">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </FloatingVueDropdown>
</template>

<script setup>
import { Dropdown as FloatingVueDropdown } from 'floating-vue';
import { onBeforeUnmount, ref } from 'vue';

const popoverRef = ref(null);

const props = defineProps({
  itemSelector: {
    type: String,
    default: 'li > a:not(:disabled)',
  },
});

const popoverKeydown = (e) => {
  const popover = popoverRef.value;

  if (!popover) {
    return;
  }

  if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
    e.preventDefault();

    const items = [...popover.$refs.popperContent.$el.querySelectorAll(props.itemSelector)];

    if (!items.length) {
      return;
    }

    let index = items.indexOf(e.target);
    index = e.key === 'ArrowDown' ? index + 1 : index - 1;
    items[index]?.focus();
  }

  if ((e.key === 'Enter' || e.key === ' ') && e.target === popover.$refs.popperContent.$el) {
    e.preventDefault();
    popover.hide();
  }
};

const onShow = () => {
  document.addEventListener('keydown', popoverKeydown);
};

const onHide = () => {
  document.removeEventListener('keydown', popoverKeydown);
  const popover = popoverRef.value;
  popover?.$refs.popper.$_targetNodes[0].focus();
};

onBeforeUnmount(() => {
  document.removeEventListener('keydown', popoverKeydown);
});
</script>

<style>
.v-popper--theme-dropdown-menu .v-popper__arrow-container {
  display: none;
}
</style>

가장 중요한 부분의 분해

슬롯을 floating-vue 드롭다운 구성 요소로 전달합니다.

<FloatingVueDropdown>
  <template v-for="(_, slot) in $slots" #[slot]="scope">
    <slot :name="slot" v-bind="scope || {}" />
  </template>
</FloatingVueDropdown>

일부 구성 요소 기본값 설정

ref="popoverRef" - 팝오버ref는 DOM 관련 작업에 필요합니다.

:distance="14" - 드롭다운 트리거와 드롭다운 메뉴 사이의 거리를 설정합니다

.

:triggers="['click']" - 클릭 시 드롭다운 열기

theme="dropdown-menu" - 기본적으로 모든 기본 스타일floating-vueDropdown을 제거하여 테마를 자체 테마로 설정합니다.

placement="bottom-start" - 드롭다운의 기본 배치

auto-hide @show="onShow" - Dropdown가 표시될 때 실행되는 메서드

@hide="onHide" - Dropdown가 숨겨질 때 실행되는 메서드

The itemSelector prop - 구성 요소가 키보드 탐색이 순환하는 드롭다운 항목을 가져오기 위해 내부적으로 사용하는 선택기입니다.

popoverKeydown 메서드 - 이 메서드는 드롭다운이 표시될 때 document keydown 리스너로 등록되며(onShow 메서드에서) 모든 키보드 기능을 포함합니다. 위쪽/아래쪽 화살표 키 누름을 듣고 방향에 따라 항목에 대한 드롭다운 항목 설정Arrayfocus을 순환합니다. 또한 Enter 및 Space 키 누름을 수신하여 드롭다운 트리거에서 발생하면 드롭다운을 엽니다. e.preventDefault(); 의 사용법에 주목하십시오. 이것은 드롭다운이 열려 있을 때 위/아래 키를 사용하는 동안 페이지가 스크롤되지 않도록 하기 위한 것입니다.

onHide 메서드는 document keydown 리스너를 제거하고 포커스를 드롭다운 트리거로 되돌립니다.

구조 및 스타일링

기본Dropdown 구성 요소가 준비되었으므로 이를 사용하여 Tailwind를 사용하여 드롭다운 메뉴를 만들어 보겠습니다!
App.vue

<template>
  <Dropdown class="inline" popper-class="w-64 bg-white border rounded-lg shadow-md">
    <!-- Dropdown trigger -->
    <button
      class="inline-block px-6 py-3 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
    >
      Dropdown button
    </button>

    <!-- Dropdown content -->
    <template #popper="{ hide }">
      <ul class="py-1 text-gray-70">
        <li>
          <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none" @click="hide">
            Click me to close
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Menu item</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none">Another menu item</a>
        </li>
      </ul>
    </template>
  </Dropdown>
</template>

<script setup>
import Dropdown from './Dropdown.vue'
</script>

그게 다야!

다음은 thisStackblitz here의 최종 결과에 대한 실제 예입니다.

Vue 프로젝트로 가져올 준비가 된 floating-vue 의 드롭다운 구성 요소인 vue-simple-dropdown 을 확인하고 싶을 수도 있습니다!