<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>