vuejs 및 tailwind를 사용할 때 조건부 클래스 변경을 기반으로 하는 CSS 변환이 작동하지 않습니다.-PHP 중국어 네트워크 Q&A
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
vuejs 및 tailwind를 사용할 때 조건부 클래스 변경을 기반으로 하는 CSS 변환이 작동하지 않습니다.
P粉872182023
P粉872182023 2023-08-30 10:21:09
0
1
401

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

// 템플릿 
 
  {{ 링크.라벨 }} 
  
 // 웃긴 대사인데... 
 <라우터 링크 v-for="(하위 링크, 인덱스) in link.sublinks" :키="색인" class="sidebar-link mt-1" :to="sublink.route" >  {{ 하위 링크.라벨 }}

예상되는 동작은 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가 내 높이 맞춤 클래스를 재정의하는 것 같습니다.

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

미리 감사드립니다.

P粉872182023
P粉872182023

모든 응답 (1)
P粉211273535
P粉2112735352023-08-31 00:35:38 1층

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

으아악

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

좋다+0
답글 추가
    인기 주제
    더>
    인기 기사
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！