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

Posted 2023-02-22

【中文标题】如何用Vue.js制作一个切换主题的按钮？

【英文标题】：How to make a button that switches the theme with Vue.js?

【发布时间】：2022-01-09 01:02:56

【问题描述】：

基本上我想知道如何做的是制作一个按钮，单击该按钮时会改变我网站的主题，我找到了使用 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：我忘了用英文写所有代码。我的错。

【问题讨论】：

请参阅How to Ask。目前尚不清楚您面临什么问题。 “我需要帮助”解释得不够清楚。

【参考方案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;

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

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