Flowbite-Vue FwbDropdown组件transition属性不生效问题求助

直接给<fwb-dropdown>加transition="fade"这类属性无效，是因为该组件本身并没有暴露transition这个props来控制过渡效果。要实现下拉展开/收起的过渡，得用Vue内置的<Transition>组件结合自定义样式来做，下面是两种可行的实现方式：

方法一：手动控制显示状态+包裹Transition组件 #

通过v-model绑定下拉的显示状态，把下拉面板用<Transition>包裹，再自定义过渡样式：

<template>
  <div>
    <fwb-dropdown-button @click="isDropdownOpen = !isDropdownOpen">打开下拉菜单</fwb-dropdown-button>
    <Transition name="fade">
      <fwb-dropdown-panel v-if="isDropdownOpen">
        <fwb-dropdown-item>第一个选项</fwb-dropdown-item>
        <fwb-dropdown-item>第二个选项</fwb-dropdown-item>
        <fwb-dropdown-item>第三个选项</fwb-dropdown-item>
      </fwb-dropdown-panel>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isDropdownOpen = ref(false);
</script>

<style scoped>
/* 淡入淡出过渡的样式 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
</style>

方法二：利用组件插槽自定义过渡 #

FwbDropdown提供了panel插槽，可以直接获取下拉的open状态，在插槽内部用<Transition>包裹面板：

<template>
  <fwb-dropdown>
    <template #trigger>
      <fwb-dropdown-button>展开下拉</fwb-dropdown-button>
    </template>
    <template #panel="{ open }">
      <Transition name="slide-down">
        <fwb-dropdown-panel v-show="open">
          <fwb-dropdown-item>选项A</fwb-dropdown-item>
          <fwb-dropdown-item>选项B</fwb-dropdown-item>
        </fwb-dropdown-panel>
      </Transition>
    </template>
  </fwb-dropdown>
</template>

<style scoped>
/* 下滑过渡的样式 */
.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.25s ease-in-out;
}
</style>

你之前尝试的fade、expand这类值，是Vue内置过渡的名称，但FwbDropdown组件本身不会识别你传入的transition属性，所以必须通过上述方式手动实现过渡逻辑。

内容的提问来源于stack exchange，提问作者François Robino