Anleitung: Dunkelmodus mit TailwindCSS + Vue3 + Vite wechseln

Question

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: npmcreatevite@latestmy-vite-vue-app----templatevuecdmy-vite-vue-appnpminstall-Dtailwindcsspostcssautoprefixernpxtailwindcssinit-

P粉340264283 · Answer

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

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

:class="{ dark: darkMode }"

但事实并非如此。

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

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

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



  
    
    dark mode

视图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;
}




  
    
    dark mode

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