Vue中动态样式绑定+CSS变量实现切换明暗主题功能——从入门到进阶 ...

1.直接借助Vue的动态绑定样式绑定

Vue动态样式绑定
在Vue中，动态样式绑定是一种强大的功能，它允许开发者根据数据的变化动态地更新元素的样式。以下是对Vue动态样式绑定的详细知识梳理与详解：
一、根本知识

Vue的动态样式绑定重要通过v-bind:style（或简写为:style）指令来实现。通过该指令，可以将样式属性与Vue组件中的数据进行绑定，从而实现样式的动态变化。
二、对象语法

对象语法是动态样式绑定中最直观且常用的方法。它允许开发者通过对象的属性和值来动态设置样式。

• 根本用法
  

1. <template>
2.   <div :style="styleObject">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       styleObject: {
10.         color: 'red',
11.         fontSize: '14px'
12.       }
13.     };
14.   }
15. };
16. </script>

复制代码

在上面的例子中，styleObject是一个包含样式属性和值的对象。当styleObject的属性值发生变化时，<div>元素的样式也会相应地发生变化。

• 驼峰式与短横线分隔式
  

Vue中的样式属性可以是驼峰式（如fontSize）或短横线分隔式（如font-size）。在模板中，推荐使用短横线分隔式，因为这与CSS中的写法保持一致。但在JavaScript对象中，由于驼峰式是标准的属性命名方式，所以也可以使用驼峰式。Vue会自动将驼峰式属性转换为短横线分隔式。
三、数组语法

数组语法允许开发者结合多个样式对象，这在必要组合多种条件下的样式时非常有用。

• 根本用法
  

1. <template>
2.   <div :style="[baseStyles, overridingStyles]">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       baseStyles: {
10.         color: 'blue',
11.         fontSize: '14px'
12.       },
13.       overridingStyles: {
14.         color: 'green'
15.       }
16.     };
17.   }
18. };
19. </script>

复制代码

在上面的例子中，baseStyles和overridingStyles是两个包含样式属性的对象。当它们被组合在一起并绑定到<div>元素的style属性上时，overridingStyles中的样式会覆盖baseStyles中类似属性的样式。
四、条件样式

条件样式允许开发者根据条件动态地改变样式。这可以通过三元表达式、计算属性或方法来实现。

• 三元表达式
  

1. <template>
2.   <div :style="{ color: isActive ? 'green' : 'red' }">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       isActive: true
10.     };
11.   }
12. };
13. </script>

复制代码

在上面的例子中，isActive是一个条件变量。当isActive为true时，<div>元素的文字颜色为绿色；当isActive为false时，文字颜色为赤色。

• 计算属性
  

计算属性可以将复杂的样式逻辑封装起来，使模板更加简洁。

1. <template>
2.   <div :style="computedStyles">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       isActive: true
10.     };
11.   },
12.   computed: {
13.     computedStyles() {
14.       return {
15.         color: this.isActive ? 'green' : 'red',
16.         fontSize: '14px'
17.       };
18.     }
19.   }
20. };
21. </script>

复制代码

在上面的例子中，computedStyles是一个计算属性，它根据isActive的值动态计算样式并返回。
五、结合类名与内联样式

在Vue中，还可以将动态样式与外部样式表结合使用。这可以通过动态地添加或移除类名来实现。

• 对象语法绑定类名
  

1. <template>
2.   <div :class="{ active: isActive }">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       isActive: true
10.     };
11.   }
12. };
13. </script>
15. <style>
16. .active {
17.   font-weight: bold;
18. }
19. </style>

复制代码

在上面的例子中，当isActive为true时，<div>元素会添加active类名，从而应用.active样式。

• 数组语法绑定多个类名
  

1. <template>
2.   <div :class="[classOne, classTwo]">Hello World</div>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       classOne: 'class-a',
10.       classTwo: 'class-b'
11.     };
12.   }
13. };
14. </script>
16. <style>
17. .class-a {
18.   color: red;
19. }
21. .class-b {
22.   font-size: 20px;
23. }
24. </style>

复制代码

在上面的例子中，classOne和classTwo是两个数据属性，它们的值分别是样式类名。通过数组语法，可以将这两个样式类同时应用到一个元素上。
六、实际应用场景

动态样式绑定在Vue中有广泛的应用场景，如：

• 相应式设计：根据屏幕尺寸动态调整样式。
  
• 交互结果：根据用户操作（如点击、悬停）动态改变样式。
  
• 状态显示：根据数据状态（如错误提示、成功信息）动态应用样式。
  
• 主题切换：根据用户选择动态切换不同的主题样式。
  

七、主题切换实现

1. <template>
2. <el-header class="header" :style="style1">
3. </el-header>
4. </template>
5. <script setup lang="ts">
6. const variables = reactive({
7.   //默认主题颜色
8.   'dark': '#374151',
9.   //鲜明色
10.   'light': '#ffffff'
11. })
12. const curTheme=ref("dark")
14. let color=computed(()=>{
15.   return variables[curTheme.value];
16. })
17. // 使用 computed 动态计算样式
18. const style1 = computed(() => {
19.   return {
20.     'background-color': color.value
21.   }
22. })
23. const toggleTheme=()=>{
24. curTheme.value=curTheme.value==="dark"?"light":"dark";
25. }
26. </script>
27. <style>
28. .header {
29.   display: flex;
30.   justify-content: space-between;
31.   align-items: center;
32.   color: white;
33.   padding: 0 20px;
34.   height: 7%;
35. }
36. </style>

复制代码

2.Vue中样式绑定动态变量传递给CSS {’–bg’:color}

Vue中CSS动态样式绑定

1. <template>
2. <el-header class="header" :style="{'--bg':color}">
3. </el-header>
4. </template>
5. <script setup lang="ts">
6. const variables = reactive({
7.   //默认主题颜色
8.   'dark': '#374151',
9.   //鲜明色
10.   'light': '#ffffff'
11. })
12. const curTheme=ref("dark")
14. let color=computed(()=>{
15.   return variables[curTheme.value];
16. })
18. </script>
19. <style>
20. .header {
21.   display: flex;
22.   justify-content: space-between;
23.   align-items: center;
24.   color: white;
25.   padding: 0 20px;
26.   height: 7%;
27.   background-color: var(--bg);
28. }
29. </style>

复制代码

3.利用SCSS变量+动态类样式切换:class="[‘header’,curTheme]"

3.1定义css变量

1. //variable.css
2. //默认主题颜色
3. $dark: #374151;
4. //鲜明色
5. $light:#ffffff;
6. $header-default-height:20%;

复制代码

3.2导入scss文件

1. <style scoped lang="scss">
2. @import "src/assets/styles/variables";
3. </style>

复制代码

3.3使用css变量构建不同类样式

1. <style scoped lang="scss">
2. @import "src/assets/styles/variables";
3. .light{
4.   background-color:$light;
5. }
6. .dark{
7.   background-color:$dark;
8. }
9. .header {
10.   display: flex;
11.   justify-content: space-between;
12.   align-items: center;
13.   color: white;
14.   padding: 0 20px;
15.   height: 7%;
16. }
17. </style>

复制代码

3.4 设置切换逻辑

1. <script setup lang="ts">
2. const curTheme=ref("dark")
3. const toggleTheme=()=>{
4. curTheme.value=curTheme.value==="dark"?"light":"dark";
5. }
6. </script>

复制代码

3.5绑定动态类样式

1. <template>
2. <el-header :class="['header',curTheme]">
3. </el-header>
4. </template>

复制代码

4.修改scss变量值

在 Vue 中，你可以通过直接修改 CSS 变量的值来实现主题切换。CSS 变量（也称为自定义属性）允许你在 CSS 中定义可以在整个文档或特定元素范围内重用的值。通过 JavaScript，你可以动态地改变这些变量的值，从而改变页面的样式。
以下是一个简单的例子，展示了如何在 Vue 组件中通过修改 CSS 变量的值来切换主题：

• 在 CSS/SCSS 中定义 CSS 变量：
  

起首，在你的全局样式文件（如 styles.scss 或直接在组件的 <style> 标签内）中定义 CSS 变量。

1. :root {
2.   --primary-color: #374151; // 默认主题颜色
3.   --background-color: #f0f0f0; // 默认背景颜色
4. }
6. .dark-theme {
7.   --primary-color: #ffffff; // 深色主题颜色
8.   --background-color: #374151; // 深色背景颜色
9. }

复制代码

留意：虽然 .dark-theme 类在这里被定义了，但我们稍后将通过 JavaScript 直接修改根元素的 CSS 变量，而不是切换类名。

• 在 Vue 组件中：
  

在你的 Vue 组件中，你可以通过 mounted 钩子、计算属性或方法来访问和修改这些 CSS 变量的值。

1. <template>
2.   <div :class="[isDarkTheme ? 'dark-theme-indicator' : '']">
3.     <!-- 你的内容 -->
4.     <button @click="toggleTheme">切换主题</button>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   data() {
11.     return {
12.       isDarkTheme: false, // 初始主题为浅色
13.     };
14.   },
15.   methods: {
16.     toggleTheme() {
17.       this.isDarkTheme = !this.isDarkTheme;
18.       this.updateThemeVariables();
19.     },
20.     updateThemeVariables() {
21.       const root = document.documentElement;
22.       root.style.setProperty('--primary-color', this.isDarkTheme ? '#ffffff' : '#374151');
23.       root.style.setProperty('--background-color', this.isDarkTheme ? '#374151' : '#f0f0f0');
24.     },
25.   },
26.   mounted() {
27.     // 初始化主题（可选）
28.     this.updateThemeVariables();
29.   },
30. };
31. </script>
33. <style scoped>
34. /* 你可以在这里添加一些基于 CSS 变量的样式 */
35. .dark-theme-indicator {
36.   /* 只是一个指示器，用于显示当前是深色主题 */
37.   border: 1px solid red; /* 仅为示例 */
38. }
40. /* 使用 CSS 变量 */
41. body {
42.   background-color: var(--background-color);
43.   color: var(--primary-color);
44. }
46. /* ... 其他样式 ... */
47. </style>

复制代码

在这个例子中，toggleTheme 方法会切换 isDarkTheme 的值，并调用 updateThemeVariables 方法来更新 CSS 变量的值。updateThemeVariables 方法通过访问 document.documentElement（即 <html> 元素）并设置其 style.setProperty 方法来更改 CSS 变量的值。
留意，虽然我们在组件中定义了 .dark-theme 类，但实际上并没有将其应用到任何元素上。这是因为我们直接通过 JavaScript 修改了 CSS 变量的值，而不是通过切换类名来改变样式。不过，你仍旧可以保存这个类作为一个指示器或用于其他目的（好比添加一些仅在深色主题下显示的额外样式）。
别的，请留意，假如你的项目中使用了 SCSS，并且你希望在 SCSS 文件中使用这些变量，你必要确保在编译 SCSS 时这些变量已经被定义。由于 CSS 变量是在运行时通过 JavaScript 修改的，SCSS 编译时无法知道它们的最终值。因此，你通常会在全局样式表或组件的 <style> 标签中定义这些变量，并在 JavaScript 中动态地修改它们。
留意事项

有些时候明显导入scss，但确发现不起作用，还是找不到css变量！！！

思量CSS 文件加载次序问题，是真的先加载scss文件了吗？
假如你的 CSS 变量定义在一个后加载的 CSS 文件中，而你在一个先加载的 CSS 文件或 JavaScript 代码中尝试访问它，那么就会出现未定义的错误。确保定义变量的 CSS 文件在访问变量的文件之前被加载。
不妨定义一个全局的变量并在main.ts就导入（虚拟DOM生成前就导入）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。