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

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

Vue动态样式绑定

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

一、基础知识

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

二、对象语法

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

1. 基本用法

<template><div :style="styleObject">Hello World</div>
</template><script>
export default {data() {return {styleObject: {color: 'red',fontSize: '14px'}};}
};
</script>

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

2. 驼峰式与短横线分隔式

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

三、数组语法

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

1. 基本用法

<template><div :style="[baseStyles, overridingStyles]">Hello World</div>
</template><script>
export default {data() {return {baseStyles: {color: 'blue',fontSize: '14px'},overridingStyles: {color: 'green'}};}
};
</script>

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

四、条件样式

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

1. 三元表达式

<template><div :style="{ color: isActive ? 'green' : 'red' }">Hello World</div>
</template><script>
export default {data() {return {isActive: true};}
};
</script>

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

2. 计算属性

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

<template><div :style="computedStyles">Hello World</div>
</template><script>
export default {data() {return {isActive: true};},computed: {computedStyles() {return {color: this.isActive ? 'green' : 'red',fontSize: '14px'};}}
};
</script>

在上面的例子中，computedStyles是一个计算属性，它根据isActive的值动态计算样式并返回。

五、结合类名与内联样式

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

1. 对象语法绑定类名

<template><div :class="{ active: isActive }">Hello World</div>
</template><script>
export default {data() {return {isActive: true};}
};
</script><style>
.active {font-weight: bold;
}
</style>

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

2. 数组语法绑定多个类名

<template><div :class="[classOne, classTwo]">Hello World</div>
</template><script>
export default {data() {return {classOne: 'class-a',classTwo: 'class-b'};}
};
</script><style>
.class-a {color: red;
}.class-b {font-size: 20px;
}
</style>

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

六、实际应用场景

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

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

七、主题切换实现

<template><el-header class="header" :style="style1"></el-header>
</template>
<script setup lang="ts">
const variables = reactive({//默认主题颜色'dark': '#374151',//鲜明色'light': '#ffffff'
})
const curTheme=ref("dark")let color=computed(()=>{return variables[curTheme.value];
})
// 使用 computed 动态计算样式
const style1 = computed(() => {return {'background-color': color.value}
})
const toggleTheme=()=>{
curTheme.value=curTheme.value==="dark"?"light":"dark";
}
</script>
<style>
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;
}
</style>

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

Vue中CSS动态样式绑定

<template><el-header class="header" :style="{'--bg':color}"></el-header>
</template>
<script setup lang="ts">
const variables = reactive({//默认主题颜色'dark': '#374151',//鲜明色'light': '#ffffff'
})
const curTheme=ref("dark")let color=computed(()=>{return variables[curTheme.value];
})</script>
<style>
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;background-color: var(--bg);
}
</style>

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

3.1定义css变量

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

3.2导入scss文件

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

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

<style scoped lang="scss">
@import "src/assets/styles/variables";
.light{background-color:$light;
}
.dark{background-color:$dark;
}
.header {display: flex;justify-content: space-between;align-items: center;color: white;padding: 0 20px;height: 7%;
}
</style>

3.4 设置切换逻辑

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

3.5绑定动态类样式

<template><el-header :class="['header',curTheme]"></el-header></template>

4.修改scss变量值

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

以下是一个简单的例子，展示了如何在 Vue 组件中通过修改 CSS 变量的值来切换主题：

1. 在 CSS/SCSS 中定义 CSS 变量：

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

:root {--primary-color: #374151; // 默认主题颜色--background-color: #f0f0f0; // 默认背景颜色
}.dark-theme {--primary-color: #ffffff; // 深色主题颜色--background-color: #374151; // 深色背景颜色
}

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

2. 在 Vue 组件中：

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

<template><div :class="[isDarkTheme ? 'dark-theme-indicator' : '']"><!-- 你的内容 --><button @click="toggleTheme">切换主题</button></div>
</template><script>
export default {data() {return {isDarkTheme: false, // 初始主题为浅色};},methods: {toggleTheme() {this.isDarkTheme = !this.isDarkTheme;this.updateThemeVariables();},updateThemeVariables() {const root = document.documentElement;root.style.setProperty('--primary-color', this.isDarkTheme ? '#ffffff' : '#374151');root.style.setProperty('--background-color', this.isDarkTheme ? '#374151' : '#f0f0f0');},},mounted() {// 初始化主题（可选）this.updateThemeVariables();},
};
</script><style scoped>
/* 你可以在这里添加一些基于 CSS 变量的样式 */
.dark-theme-indicator {/* 只是一个指示器，用于显示当前是深色主题 */border: 1px solid red; /* 仅为示例 */
}/* 使用 CSS 变量 */
body {background-color: var(--background-color);color: var(--primary-color);
}/* ... 其他样式 ... */
</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生成前就导入）