关于vue.js:vue中实现-‘换肤-切换样式主题-功能的三种方式详解干货

形式 1：定义全局的 CSS 变量

App.vue：

<style>
/* 定义全局的 css 变量 */
:root {
  /* 背景色 */
  --theme_bg_color: red;
  /* 按钮色彩 */
  --theme_button_color: yellowgreen;
}
</style>

demo.vue（css）：

<style scoped>
 /* 应用全局的 css 变量设置色彩 */
.myButton {background: var(--theme_bg_color);
}
.myDiv {background: var(--theme_button_color);
  width: 200px;
  height: 200px;
}
</style>

demo.vue（html）：

    <h3> 换肤 / 切换款式主题 形式 1：</h3>
    <button @click="changeTheme('Moccasin')"> 换肤为 Moccasin</button>
    <button @click="changeTheme('#1E90FF')"> 换肤为 #1E90FF</button>
    <button @click="changeTheme('#00FF7F')"> 换肤为 #00FF7F</button>
    <button @click="changeTheme('DeepPink')"> 换肤为 DeepPink</button>
    <button class="myButton"> 我是一个能够换肤的按钮 </button>
    <div class="myDiv"> 我是一个能够换肤的 div</div>

demo.vue（js）：

<script>
export default {setup() {
    // 切换主题形式 1：批改全局 CSS 变量
    let changeTheme = (color) => {document.documentElement.style.setProperty("--theme_bg_color", color);
      document.documentElement.style.setProperty("--theme_button_color", color);
    };
    return {changeTheme};
  },
};
</script>

成果：

形式 2：切换已定义好的 css 文件

Public/css/theme_1.css：

.myButton2{background: Moccasin;}
.myDiv2 {background: Moccasin;}

App.vue：

<script>
import {onMounted} from "vue";
export default {
  name: "App",
  components: {},
  setup() {onMounted(() => {console.log("App.vue ---- onMounted");

      // 形式 2（创立 link 标签默认引入 ./css/theme_1.css 主题款式文件）let link = document.createElement("link");
      link.type = "text/css";
      link.id = "theme";
      link.rel = "stylesheet";
      link.href = "./css/theme_1.css";
      document.getElementsByTagName("head")[0].appendChild(link);
    });

    return {};},
};
</script>

demo.vue（html）：

<h3> 换肤 / 切换款式主题 形式 2：</h3>
<button @click="changeTheme2(1)"> 换肤为 Moccasin</button>
<button @click="changeTheme2(2)"> 换肤为 #1E90FF</button>
<button @click="changeTheme2(3)"> 换肤为 #00FF7F</button>
<button @click="changeTheme2(4)"> 换肤为 DeepPink</button>
<button class="myButton2"> 我是一个能够换肤的按钮 </button>
<div class="myDiv2"> 我是一个能够换肤的 div</div>

demo.vue（js）：

<script>
export default {setup() {
    // 切换主题形式 2：切换已定义好的 css 文件
    let changeTheme2 = (type) => {document.getElementById("theme").href = `./css/theme_${type}.css`;
    };
    return {changeTheme2};
  },
};
</script>

成果：

形式 3：切换顶级 CSS 类名 (需应用 css 处理器, 如 sass、less 等)

src/assets/css/theme.less：

/* 预设四种主题 */
.theme_1 {
  .myButton3 {background: #00ff7f;}
  .myDiv3 {background: #00ff7f;}
}

.theme_2 {
  .myButton3 {background: #00ff7f;}
  .myDiv3 {background: #00ff7f;}
}

.theme_3 {
  .myButton3 {background: #00ff7f;}
  .myDiv3 {background: #00ff7f;}
}

.theme_4 {
  .myButton3 {background: #00ff7f;}
  .myDiv3 {background: #00ff7f;}
}

main.js：

// 形式 3：须要先引入全局主题款式文件 
import "./assets/css/theme.less";

App.vue：

<script>
import {onMounted} from "vue";
export default {
  name: "App",
  components: {},
  setup() {onMounted(() => {console.log("App.vue ---- onMounted");
        
     // 形式 3（设置顶层 div 的 class 类名）document.getElementById("app").setAttribute("class", "theme_1");

    return {};},
};
</script>

demo.vue（html）：

<h3> 换肤 / 切换款式主题 形式 3：</h3>
<button @click="changeTheme3(1)"> 换肤为 Moccasin</button>
<button @click="changeTheme3(2)"> 换肤为 #1E90FF</button>
<button @click="changeTheme3(3)"> 换肤为 #00FF7F</button>
<button @click="changeTheme3(4)"> 换肤为 DeepPink</button>
<button class="myButton3"> 我是一个能够换肤的按钮 </button>
<div class="myDiv3"> 我是一个能够换肤的 div</div>

demo.vue（js）：

<script>
export default {setup() {// 切换主题形式 3：切换顶级 CSS 类名 ( 需应用处理器)
    let changeTheme3 = (type) => {document.getElementById("app").setAttribute("class", `theme_${type}`);
    };

    return {changeTheme3};
  },
};
</script>

成果：