如何用Vue.js制作一个切换主题的按钮？

Question

基本上我想知道如何做的是制作一个按钮，单击该按钮时会改变我网站的主题，我找到了使用 PHP 的线程，但我正在研究 Vue.js。

使用此代码，我可以在单击时更改框的颜色，我正在尝试制定此代码以更改整个页面主体的主题。我需要帮助，我是初学者。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<style>
#app {
display: flex;
justify-content: space-around;
}

.demo {
width: 100px;
height: 100px;
background-color: grey;
}

.c1 {
background-color: red;
}
.c2 {
background-color: green;
}
.c3 {
background-color: blue;
}
</style>

<div id="app">
 <div class="demo" :class="{c1:  aplicarC1}"  @click="aplicarC1 = !aplicarC1"></div>
 <div class="demo"  :class="{c2: aplicarC2}" @click="aplicarC2 = !aplicarC2"></div>
  <div class="demo" :class="{c3: aplicarC3}" @click="aplicarC3 = !aplicarC3 "></div>
  </div>

  <script>
  new Vue({
   el: '#app',
   data: {
   aplicarC1: false,
   aplicarC2: false,
   aplicarC3: false
   }
   })
   </script>    

PS：我忘了用英文写所有代码。我的错。

Answer 1

几周前我做了完全相同的项目。

这是我的代码

切换组件

<template>
  <div class="toggle-wrapper">
    <label class="switch">
      <input
        type="checkbox"
        :checked="mode === 'dark' ? 'checked' : false"
        id="togBtn"
        @change="$emit('toggle')"
      />
      <div class="slider round"></div>
    </label>
  </div>
</template>

<script>
export default {
  props: ["mode"],
};
</script>

<style>
.toggle-wrapper {
  display: flex;
  align-items: center;
  position: absolute;
  height: 60px;
  width: 70px;
  margin-left: 0.5em;
}

.switch {
  position: absolute;
  display: inline-block;
  width: 70px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #41b883;
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #35495e;
}

input:checked + .slider:before {
  background-color: #19222c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(36px);
}

/*------ ADDED CSS ---------*/
.slider:after {
  content: "LIGHT";
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 18px;
  left: 4.75em;
  font-size: 10px;
  transition: 1s;
}

input:checked + .slider:after {
  content: "DARK";
  left: 2.3em;
  transition: 1s;
}
</style>

应用组件

你想要在你的应用组件中做的就是将主题声明为一个类，例如：

<template>
  <div class="app" :class="mode">
    <Header :mode="mode" @toggle="toggle" />
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "app",
  data() {
    return {
      mode: "light",
    };
  },
  components: {
    Header,
  },
  methods: {
    toggle() {
      if (this.mode === "dark") {
        this.mode = "light";
      } else {
        this.mode = "dark";
      }
    },
  },
};
</script>

Header 组件

如您所见，我的切换组件在标题组件内，这是标题：

<template>
  <header>
    <Toggle :mode="mode" @toggle="$emit('toggle')" />

    <nav>
      <router-link :to="{ name: 'Home' }" class="nav-link">Home</router-link>
      <router-link :to="{ name: 'About' }" class="nav-link">About</router-link>
      <router-link :to="{ name: 'Library' }" class="nav-link"
        >Library</router-link
      >
      <router-link :to="{ name: 'Create' }" class="nav-link"
        >Create</router-link
      >
      <router-link :to="{ name: 'Code Editor' }" class="nav-link"
        >Code Editor</router-link
      >
    </nav>
    <router-view />
  </header>
</template>

<script>
import Toggle from "@/components/Toggle";
export default {
  props: ["mode"],
  components: {
    Toggle,
  },
};
</script>

总结

现在你的类是暗色或亮色，你可以开始造型了。

例如：

// Dark Mode

.dark {
  background: #15202b;
  color: #e8e8e8;
}

// Light Mode

.light {
  background: white;
  color: #15202b;
}

哦，是的，顺便说一句，是西班牙语或俄语，甚至可能是意大利语。告诉我！

希望我能帮到你一点，结果会很精彩！