vuejs 및 tailwind를 사용할 때 조건부 클래스 변경을 기반으로 하는 CSS 변환이 작동하지 않습니다.

Question

我尝试使用 순풍 <코드>전환 类来展开侧边栏 Vuejs의 다양한 子菜单 组件。

// 템플릿

<div
    :class="`${index === 0 ? 'mt-2': ''} 사이드바-링크 사이드바-드롭다운-링크`"
    @click="link.open = !link.open"
>
    <div class="flex items-center">
        <FontAwesomeIcon
            :icon="link.icon"
            class="사이드바-링크-아이콘"
        />
        {{ 링크.라벨 }}
    </div>
    <FontAwesomeIcon
        :icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']"
        class="사이드바-드롭다운-링크-아이콘"
    />
</div>

// 웃긴 대사인데...
<div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} 사이드바-드롭다운 메뉴`">
    <라우터 링크
        v-for="(하위 링크, 인덱스) in link.sublinks"
        :키="색인" class="sidebar-link mt-1"
        :to="sublink.route"
    >
        <FontAwesomeIcon
            :icon="sublink.icon"
            class="사이드바-링크-아이콘 pl-3"
        />
        {{ 하위 링크.라벨 }}
    </라우터-링크>
</div>

예상되는 동작은 link.open가 true가 될 때 interesting line

;tag/strong>는 300밀리초 전환으로 확장(또는 표시)되며, 해당 height 값은 link.sublinks.length 값 정의는 모두 sidebar-dropdown-menu 제 말은:

.sidebar-dropdown-menu { @apply w-full Overflow-hidden 전환-[높이] 기간-[300ms] }

link.sublinks.length가 3인 경우 적용되는 맞춤 클래스는 h-[135px]입니다. ; 재미있는 줄에

태그가 표시되지만 p-0 변환이 작동하지 않습니다. Google Chrome 개발자 도구에는 height: 135px가 비활성화된 CSS 규칙으로 표시됩니다.

마지막으로 h-[${link.sublinks.length * 45}px]를 상수 값(예: h-[200px]< /code>) 모든 것이 예상대로 작동합니다.

h-auto가 내 높이 맞춤 클래스를 재정의하는 것 같습니다.

저는 라틴어라서 영어를 잘 못합니다.

미리 감사드립니다.

Answer 1

작동했지만 찾은 솔루션이 마음에 들지 않습니다.

으아악

높이 속성을 정의하기 위해 Tailwind 클래스를 사용하지 마세요. 지금은 그게 전부입니다.