Блог

Главная - Вопросы по программированию - Выпадающее меню Tailwind

Выпадающее меню Tailwind

#vue.js #drop-down-menu #vue-router #tailwind-css #routerlink

#vue.js #выпадающее меню #vue-маршрутизатор #tailwind-css #routerlink

Вопрос:

Я использую следующее выпадающее меню в tailwind amp; vue-router https://codepen.io/huphtur/pen/ordMeN.

Мне нужно использовать <router-link to="/"> внутри выпадающего меню, но я обнаружил, что при этом, как только вы нажимаете на ссылку меню, выпадающее меню не закрывается должным образом. При использовании обычных <a> элементов выпадающее меню закрывается, как и должно быть.

Это код:

выпадающий элемент comp

 <div v-if="isOpen == false" class="dropdown inline-block relative sm:ml-20">
          <button class="text-gray-700 font-normal py-2 px-4 rounded inline-flex items-center">
            <span class="mr-1 cursor-default">Vita</span>
          </button>
          <ul class="w-32 dropdown-menu absolute hidden text-gray-700 pt-1 shadow-lg z-10">
            <li > <router-link to="/biografia"> <a class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Bio </a> </router-link> </li>
            <li > <router-link to="/tour"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Tour </a> </router-link> </li>
            <li > <router-link to="/foto"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Foto </a> </router-link> </li>
            <li > <router-link to="/video"> <a class="rounded-b bg-white  hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Video </a> </router-link> </li>
          </ul>
        </div>
}

стиль css в comp

 .dropdown:hover .dropdown-menu {
  display: block;
}

Как я могу реализовать эту функциональность с помощью <router-link to="/"> ?

Спасибо!

Комментарии:

1. routerLink генерирует элемент <a> на его месте. Нет необходимости вставлять другую ссылку внутрь. Просто примените классы tailwind к компонентам routerLink.

2. Хорошо, это хорошее предложение, но оно по-прежнему работает не так, как должно.

3. Можете ли вы опубликовать больше вашего кода, в частности, там, где вы определили свой <router-view></router-view> ? Еще более полезным был бы рабочий пример на jsfiddle или подобном сайте.

4. Как вы это решили?

Ответ №1:

router-link предоставляет вам слот для включения настроек. Я использовал это в прошлом, чтобы применить стиль к внешнему li элементу, когда router-link он был активен, но вы можете использовать тот же подход и для закрытия выпадающего списка.

   <router-link
    to="/"
    v-slot="{ href, route, navigate, isActive, isExactActive }"
  >
    <a
      :href="href"
      @click="isOpen = false; navigate($event)"
    >
      Homepage
    </a>
  </router-link>

Источник