简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
방법: TailwindCSS + Vue3 + Vite를 사용하여 다크 모드 전환
P粉933003350
P粉933003350 2023-11-01 12:05:00
0
1
715

저는 Vite/Vue3 초보자인데 현재 커뮤니티의 결합된 지식이 필요한 문제에 직면해 있습니다.

Vite/Vue3 애플리케이션을 만들고 TailwindCSS를 설치했습니다.

으아아아

그런 다음 Tailwind 홈페이지의 지침을 따랐습니다.

tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

새로 생성된 ./src/index.css 파일을 ./src/main.js 파일로 가져옵니다.

./src/index.css 파일을 생성하고 @tailwind 지시문 Tailwind 레이어를 각 파일에 추가합니다.

이제 Vite/Vue3/TailwindCSS 앱이 실행 중이고 다크 모드를 전환하는 기능을 추가하고 싶습니다.

Tailwind 문서에서는 darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为 <html>로 표시하여 이를 수행할 수 있음을 나타냅니다.

저는 다음 코드를 사용하여 이 작업을 수행했습니다.

  1. 내부index.html



으아아아
  1. About.vue 내부



으아아아

예, Vue3 스타일 코드가 아니라는 것을 알고 있습니다. 그리고 네, element.classList.toggle() 而不是 .remove() 和 .add()를 사용하는 것이 가능하다는 것을 알고 있습니다. 하지만 나 같은 다른 초보자도 나중에 이것을 보고 시작할 수 있는 간단한 코드를 고맙게 여기게 될 것입니다. 그러니 자비를 베풀어주세요...

이제 드디어 커뮤니티에 물어볼 질문이 생겼습니다.

저는 DOM을 이렇게 조작하는 것이 Vue의 작업 방식이 아니라는 것을 알고 있습니다. 물론 나는 올바른 방법으로 목표를 달성하고 싶다. 그런데 어떻게 해야 하나요?

저를 믿으세요. Google에서 몇 시간 동안 검색했지만 this 및 this 추가 npm 모듈을 설치하지 않고 작동하는 솔루션을 찾지 못했습니다.

하지만 저는 미니멀한 접근 방식을 원했어요. 저와 학습을 시작하려는 다른 사람들을 압도하지 않도록 가능한 한 적게 의존하십시오.

이를 배경으로 - 나와 다른 초보자에게 적합한 솔루션이 있습니까? :-)

P粉933003350
P粉933003350

모든 응답(1)
P粉340264283
P粉3402642832023-11-02 09:11:13 1층

이벤트의 대상 요소가 애플리케이션 외부에 있습니다. 즉, DOM에서 사용 가능한 메서드를 통해 쿼리하는 것 외에는 상호 작용할 수 있는 방법이 없습니다.

즉, 당신은 옳은 일을 했습니다 . 요소가 애플리케이션 내부에 있는 경우 클래스를 속성에 연결하고 Vue가 DOM 조작의 세부 사항을 처리하도록 하세요.

으아악

하지만 그렇지 않습니다.

참고로 매우 중요합니다 토글 방법은 적용/제거 여부를 결정하기 위해 <body> 요소에 클래스가 있는지 여부에 의존하지 않습니다. 유일한 정보 소스인 애플리케이션 상태에 저장된 값을 유지해야 합니다.
이것은 여러분이 깨고 싶지 않은 Vue 원칙입니다. 즉, 데이터가 DOM 상태를 주도하도록 하세요. 그 반대가 아닙니다.

값은 <body>(설치 시)의 현재 상태에서 얻을 수 있지만, 그 시점부터 애플리케이션 상태 변경에 따라 요소에 클래스가 있는지 여부가 결정됩니다.

vue2 예:

으아악 으아악 으아악

예시 3개 보기:

으아악 으아악 으아악

물론 여러 구성 요소에서 사용하는 경우 darkMode 的状态，您可能希望将 darkMode 的状态保留在 data 中的某个外部存储中，而不是本地（并通过 compulated 구성 요소에 제공하세요.

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