vuejs 및 tailwind를 사용할 때 조건부 클래스 변경을 기반으로 하는 CSS 변환이 작동하지 않습니다.
<p>我尝试使用 <strong>순풍</strong> <코드>전환</code> 类来展开侧边栏 <strong>Vuejs의 다양한 <code><router-link></code> 子菜单</strong> 组件。</p>
<pre class="brush:php;toolbar:false;">// 템플릿
<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></pre>
<p>예상되는 동작은 <code>link.open</code>가 <code>true</code>가 될 때 <strong>interesting line<div> ;</code>tag/strong>는 300밀리초 전환으로 확장(또는 표시)되며, 해당 <code>height</code> 값은 <code>link.sublinks.length</code> 값 정의는 모두 <code> sidebar-dropdown-menu</code> 제 말은: </p>
<pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full Overflow-hidden 전환-[높이] 기간-[300ms] }</pre>
<p><code>link.sublinks.length</code>가 <code>3</code>인 경우 적용되는 맞춤 클래스는 <code>h-[135px]</code>입니다. ; <code>재미있는 줄</strong>에 <div></code> 태그가 표시되지만 <code>p-0</code> 변환이 작동하지 않습니다. Google Chrome 개발자 도구에는 <code>height: 135px</code>가 비활성화된 CSS 규칙으로 표시됩니다. </p>
<p>마지막으로 <code>h-[${link.sublinks.length * 45}px]</code>를 상수 값(예: <code>h-[200px]< /code>) 모든 것이 예상대로 작동합니다. </p>
<p><code>h-auto</code>가 내 높이 맞춤 클래스를 재정의하는 것 같습니다. </p>
<p>저는 라틴어라서 영어를 잘 못합니다. </p>
<p>미리 감사드립니다. </p>
