在日常开发中随着用户需求的日益多样化，界面设计也日益复杂，如何在保持代码简洁的同时，实现界面的动态变化，是一项不小的挑战。动态样式作为实现界面动态变化的关键技术手段，不仅能够提升用户体验，还能为开发者提供更加丰富的设计空间。

动态样式在Vue中的应用，主要体现在通过数据绑定、计算属性、条件渲染等技术，使得界面元素的样式能够根据数据状态、用户交互等条件实时调整。这不仅能够实现界面的个性化展示，还能根据不同的使用场景提供更为直观、响应式的视觉反馈。

下面将总结几种动态样式常用的方法

动态style

内联样式绑定一个对象， :style 是一个动态绑定样式的指令，它允许你将样式应用到元素上，并且这些样式可以根据组件的状态或者数据动态变化。

 

<template>
  <div class="home">
    <button :style="{backgroundColor: backgroundColor[theme]}" @click="changeColor('default')">default</button>
    <button :style="{backgroundColor: backgroundColor[theme]}" @click="changeColor('new')">new</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

let theme = ref('default')
let backgroundColor = reactive({
  default: 'blue',
  new: 'red',
})
function changeColor(val) {
  theme.value = val
}
</script>

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  button{
   width: 100px;
   margin: 10px;
  }
}
</style>

 

动态class
 


<template>
  <div class="home">
    <button :class="theme" @click="changeColor('default')">default</button>
    <button :class="theme" @click="changeColor('new')">new</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

let theme = ref('default')

function changeColor(val) {
  theme.value = val
}
</script>

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  button{
   width: 100px;
   margin: 10px;
  }
  .default{
    background-color: blue;
  }
  .new{
    background-color: red;
  }
}
</style>

 

动态class 动态style 效果
 

 
 

 

 
 

scss变量
 

SCSS变量是指在SCSS（Sass的一种语法）中定义的变量，这些变量可以在整个项目中的任何SCSS文件中使用。这样做的好处是可以在一个地方集中管理项目的样式，便于统一修改和维护。
 

SCSS变量的优势
 

  • 一致性：通过全局变量，可以确保整个项目中使用的颜色、字体大小、间距等样式属性保持一致。
  • 可维护性：如果需要修改某个样式属性，只需修改全局变量的值，而不需要在多个文件中逐一修改。
  • 模块化：全局变量有助于将样式代码模块化，使得代码更加清晰和易于管理。
 

实际使用
 

.vue文件中 使用 scss变量
 

style标签中生命$themeColor变量
 

<template>
  <div class="home">
    <button>按钮</button>
  </div>
</template>

<script setup>
</script>

<style lang="scss">
$themeColor: #2779e4;
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  button{
    margin: 20vh auto;
    color: #fff;
    background-color: $themeColor;
  }
}
</style>

 

引入scss 文件使用
 

在实际开发中往往 会将scss变量的定义统一放在一个公共scss文件里管理，
 

/scr/common 下创建 index.scss文件
 

然后 在 style标签中引入scss文件
 

index.scss
 

$themeColor: #2779e4;

 

 vue
 

<style lang="scss">
@import "@/common/index.scss";
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  button{
    margin: 20vh auto;
    color: #fff;
    background-color: $themeColor;
  }
}
</style>

 

实现全局scss变量
 

考虑到项目在实际开发中，各种组件都需要统一使用样式变量，每个页面引入是不现实的，最佳的解决方案就是，将scss中的变量在全局引入，所有页面都可以访问到.
 

安装 sass
 

npm install sass

 

vite.config.ts文件中 设置css预处理器
 

 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了
        // 给导入的路径最后加上; 
        additionalData: '@import "@/common/index.scss";'
      }
    }
  }
})


 

有了以上配置，无需再单独引用index.scss,style标签中就可以直接使用 $themeColor变量了,
 

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  button{
    margin: 20vh auto;
    color: #fff;
    background-color: $themeColor;
  }
}
</style>

 

动态修改
 

原理：提前设置好多种皮肤的对应的样式，然后 利用 css 自定义属性选择器和jsdom操作方法 setAttribute 动态修改 自定义属性 来匹配不同的样式
 

1.全局配置多种皮肤样式 index.scss
 

$themeColor: #2779e4;

$themes:(
  default: (
    backgroundColor: blue,
  ),
  new: (
    backgroundColor: red,
  )
);

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}


@mixin getBackgroundColor($color) {
  @include themeify {
    background-color: themed($color)!important;
  }
}

@mixin getColor($color) {
  @include themeify {
    background-color: themed($color)!important;
  }
}

 

2 .vue文件中获取全局皮肤颜色设置对应样式，且提前初始化样式（这一步可以放到 App.vue中 全局出发一次） 
 

<template>
  <div class="home">
    <select v-model="theme">
      <option value="default">default</option>
      <option value="new">new</option>
    </select>
    <button @click="changeTheme">修改主题</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';

let theme = ref('default')
function changeTheme() {
  window.document.documentElement.setAttribute( "data-theme", theme.value );
}
onBeforeMount(() => {
  changeTheme(theme.value)
})
</script>

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  select{
    width: 100px;
    margin: 10px;
    @include getBackgroundColor("backgroundColor");
  }
  button{
    // background-color: $themeColor;
    @include getBackgroundColor("backgroundColor");
  }
}
</style>

 

效果
 

 
 

 

vue3中 scss和js变量互相使用
 

在 Vue 3 中使用 SCSS 变量 来实现样式的一致性和可重用性是一个很好的做法。Vue 3 与 SCSS可以很好地协同工作，因为 Vue 的数据驱动的模板语法与 SCSS 的变量系统相兼容。
 

以下是在 scss中使用js变量 v-bind来实现
 


<template>
  <div class="home">
    <button class="btn" @click="changeColor('blue')">default</button>
    <button class="btn" @click="changeColor('red')">new</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

let color = ref('blue')
function changeColor(val) {
  color.value = val
}
</script>

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  button{
   width: 100px;
   margin: 10px;
  }
  .btn{
    background-color: v-bind(color);
  }
}
</style>

 

然后是 js中使用scss定义的变量
 

新建 global.module.scss文件
 

$b: blue;
$r: red;

:export {
  BLUR: $b;
  RED: $r;
}

 

页面中 import引入 global.module.scss 即可
 

 


<template>
  <div class="home">
    <button class="btn" @click="changeColor(config.BLUR)">default</button>
    <button class="btn" @click="changeColor(config.RED)">new</button>
  </div>
</template>

<script setup>
import config from '@/common/global.module.scss'
import { ref } from 'vue';

let color = ref('blue')
function changeColor(val) {
  color.value = val
}
</script>

<style lang="scss">
.home{
  background-color: #fff;
  width: 80vw;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  button{
   width: 100px;
   margin: 10px;
  }
  .btn{
    background-color: v-bind(color);
  }
}
</style>

 

 
 

 

 

 

更多前端资料可点击我的主页领取
 

 

原文：https://juejin.cn/post/7397019920322101275
 

 

 
  

        # vue.js
      
        # 前端
      
        # javascript
      
  
 
 Logo 
开放原子开发者工作坊
 
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
 
 
  
更多推荐
  
 
第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

 
第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴
 
avatar 开放原子开发者工作坊
 
 
诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

 
诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”
 
avatar 开放原子开发者工作坊
 
 
诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

 
诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践
 
avatar 开放原子开发者工作坊