当前位置： 首页 > article >正文

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

article 2024/12/28 4:36:20

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>元素的样式也会相应地发生变化。

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

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时，文字颜色为红色。

  1. 计算属性

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

<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样式。

  1. 数组语法绑定多个类名
<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 变量，而不是切换类名。

  1. 在 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生成前就导入）
在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/454483.html

相关文章：

  • windos挂载目录到linux
  • 数学建模助力干细胞研究，配体纳米簇如何影响干细胞命运
  • 【LLM论文日更】| 训练大型语言模型在连续潜在空间中进行推理
  • 【MySQL】十三，关于MySQL的全文索引
  • 瑞吉外卖项目学习笔记(九)套餐列表分页查询、新增套餐、图片上传和下载
  • lv_ffmpeg学习及播放rtsp
  • 如何利用Python爬虫精准获取苏宁易购商品详情
  • K8s DaemonSet的介绍
  • Android WebView 与 H5 双向通信实现详解
  • 【商城源码的开发环境】
  • VSCode 插件开发实战（三）：插件配置项自定义设置
  • 如何在服务器上克隆、pull、push GitHub私有项目
  • GraalVM完全指南：云原生时代下使用GraalVM将Spring Boot 3应用转换为高效Windows EXE文件
  • 12.24 k8s yaml文件类型和介绍
  • 通过WSL 在 Windows 11中实现Linux虚拟环境并连接给项目部署使用的办法
  • FlaskAPI-初识
  • IP地址怎么切换到别的省份？ip可以用什么办法切换
  • #渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍08-基于时间延迟的SQL注入（Time-Based SQL Injection）
  • 【LeetCode 面试经典150题】详细题解之滑动窗口篇
  • [数据结构]图——C++描述
  • 青少年编程与数学 02-004 Go语言Web编程 21课题、应用部署
  • Java重要面试名词整理（五）：Redis
  • Linux网络功能 - 服务和客户端程序CS架构和简单web服务示例
  • #B1630. 数字走向4
  • 华为云计算HCIE笔记05
  • Conda使用命令大全