suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Anleitung: Dunkelmodus mit TailwindCSS + Vue3 + Vite wechseln

Ich bin ein Anfänger in Vite/Vue3 und stehe derzeit vor einem Problem, bei dem ich das gebündelte Wissen der Community benötige.

Ich habe eine Vite/Vue3-Anwendung erstellt und TailwindCSS installiert: 

npm create vite@latest my-vite-vue-app -- --template vue
cd my-vite-vue-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Dann bin ich der Anleitung auf der Tailwind-Homepage gefolgt:

Fügen Sie die Pfade aller Vorlagendateien in der Datei tailwind.config.js hinzu.

Importieren Sie die neu erstellte Datei ./src/index.css in die Datei ./src/main.js.

Erstellen Sie eine ./src/index.css-Datei und fügen Sie jeder Datei die Ebene „Tailwind“ der @tailwind-Direktive hinzu.

Jetzt habe ich eine Vite/Vue3/TailwindCSS-App ausgeführt und möchte die Möglichkeit hinzufügen, den Dunkelmodus umzuschalten.

Die

Tailwind-Dokumentation weist darauf hin, dass dies durch Markieren mit darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为 <html> möglich ist.

Ich habe den Job mit dem folgenden Code erledigt:

  1. Internindex.html



<html lang="en" id="html-root">
  (...)
  <body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
  1. Über.vue internal



<template>
  <div>
    <h1>This is an about page</h1>
    <button @click="toggleDarkMode">Toggle</botton>
  </div>
</template>

<script>
  export default {
    methods: {
      toggleDarkMode() {
        const element = document.getElementById('html-root')
        if (element.classList.contains('dark')) {
          element.classList.remove('dark')
        } else {
          element.classList.add('dark')
        }
      },
    },
  };
</script>

Ja, ich weiß, dass dies kein Code im Vue3-Stil ist. Und ja, ich weiß, dass es möglich ist, element.classList.toggle() 而不是 .remove() 和 .add() zu verwenden. Aber vielleicht werden andere Anfänger wie ich dies in Zukunft sehen und einen einfachen Code für den Anfang zu schätzen wissen. Also habt bitte Erbarmen...

Jetzt habe ich endlich eine Frage an die Community:

Ich weiß, dass eine solche Manipulation des DOM nicht die Vorgehensweise von Vue ist. Natürlich möchte ich meine Ziele auf die richtige Art und Weise erreichen. Aber was soll ich tun?

Glauben Sie mir, ich habe stundenlang auf Google gesucht und keine Lösung gefunden, die funktioniert, ohne dieses und dieses und dieses zusätzliche NPM-Module zu installieren.

Aber ich wollte einen minimalistischen Ansatz. Verlassen Sie sich so wenig wie möglich darauf, um mich und andere, die mit dem Lernen beginnen möchten, nicht zu überfordern.

Haben Sie vor diesem Hintergrund eine Lösung, die für mich und andere Neulinge funktionieren würde? :-)

P粉933003350P粉933003350414 Tage vor753

Antworte allen(1)Ich werde antworten

  • P粉340264283

    P粉3402642832023-11-02 09:11:13

    您的事件的目标元素位于您的应用程序之外。这意味着除了通过 DOM 可用方法查询它之外，没有其他方法可以与其交互。

    换句话说，你做得对。 如果该元素位于应用程序内，那么您只需将类链接到您的属性并让 Vue 处理 DOM 操作的细节：

    :class="{ dark: darkMode }"

    但事实并非如此。

    作为旁注，非常重要您的切换方法不依赖于 <body> 元素是否具有该类，以便决定是否应该应用它/删除。您应该将保存在应用程序状态中的值保留下来，这应该是您唯一的事实来源。
    这就是您不希望破坏的 Vue 原则：让数据驱动 DOM 状态，而不是相反。

    可以从 <body> 的当前状态获取值（安装时），但从那时起，对应用程序状态的更改将决定该类是否存在于元素上。

    vue2 示例：

    Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    darkMode: document.body.classList.contains('dark')
  }),
  methods: {
    applyDarkMode() {
      document.body.classList[
        this.darkMode ? 'add' : 'remove'
      ]('dark')
    }
  },
  watch: {
    darkMode: 'applyDarkMode'
  }
})
    body.dark {
  background-color: #191919;
  color: white;
}

    视图3示例：

    const {
  createApp,
  ref,
  watchEffect
} = Vue;

createApp({
  setup() {
    const darkMode = ref(document.body.classList.contains('dark'));
    const applyDarkMode = () => document.body.classList[
      darkMode.value ? 'add' : 'remove'
    ]('dark');
    watchEffect(applyDarkMode);
    return { darkMode };
  }
}).mount('#app')
    body.dark {
  background-color: #191919;
  color: white;
}

    显然，如果您在多个组件中使用 darkMode 的状态，您可能希望将 darkMode 的状态保留在 data 中的某个外部存储中，而不是本地（并通过 compulated 在您的组件中提供它）。

    Antwort
    0
  • StornierenAntwort