vue的script动态改css、scss变量方法

原创已于 2024-06-22 16:36:36 修改 · 5.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #css #scss

于 2022-12-08 10:42:37 首次发布

vue 同时被 2 个专栏收录

112 篇文章

订阅专栏

sass

5 篇文章

订阅专栏

本文介绍如何在Vue中利用CSS变量实现样式动态变化。覆盖Vue2与Vue3版本，包括纯Vue3环境下及结合TypeScript、Sass等场景下的解决方案。

解决场景：script设颜色变量，<style>的background-color的值"#ddd"的跟着变

序

1、这篇博文适用vue2和vue3版本，博主实验时，vue3的版本是^3.2.45

2、其实要解决的方案在vue3里有一个专栏“单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态”

3、对了这里说下，原来vue3的style vars={color}属性已经不能用了，被其他方法替代了,详情去看这篇官方文档-》SFC style CSS variable injection (new edition) by yyx990803 · Pull Request #231 · vuejs/rfcs · GitHub

4、如果你纯vue3没用！任何！第三方！框架（vue-class-component也算第三方工具！！！），你直接考下面这个demo，直接是可以跑的，下面demo你还用不了，你在往博文下面看

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

好了正文，如果上面demo你跑不了，你确认下是不是vue3版本比博主低？

博主以下说的是vue2、和vue3+ts版本、vue3的sass版本、vue3的vue-class-component工具类、vue3的vue-property-decorator工具类都可以执行的方法。

先科普下，别闲博主烦，照着先做↓↓↓↓↓↓

<html>
	<head>
	</head>
	<body>
		<input type="text"/>
		<style>
			:root {
			  --color: pink;
			}
			input {
			  background-color: var(--color);
			}
		</style>
	</body>
</html>

以上代码运行之后的结果如下图，input的北京变成红色。是吧，这个是纯静态是".html"的文件哦

root{--color：red；}，这个时候你可以认为是声明变量。然后在你要放变量的地方var(--color)就可以调用了，

以上为灵感，结合在vue2博主百度了些资料，搞了个通用方法如下

切记你别连vue-property-decorator也复制了，这里弄vue-property-decorator是告诉你他也可以用

<template>
	<a class="sumbit-btn" :style="'--color:'+color" >登录</a>
</template>
<script lang="ts">
	import {
	  Vue
	} from "vue-property-decorator";
	export default class Login extends Vue {
		data(){
			return{
				color:"red",
			}
		}
	}
</script>

<style lang="scss">
	.sumbit-btn{
		color:var(--color);
	}
					
</style>

结果如下图

扩展

--color 你可以写在vue的computed函数里、或者methods函数里定义一个方法，然后这里style就可以直接：style="style()"这句话要看的懂

<template>
	<a class="sumbit-btn" :style="style" >登录</a>
</template>

data(){
			return{
				color:"red",
			}
		}


computed: {
    style() {
      return {
        "--color": this.color
      };
    }
  }

ts组合式API的改变css变量的方法

<script setup lang="ts" >
    const color1=ref<string>("red")

<style lang="scss" scoped>
    .xxx{
		color:v-bind(color1);
	}

博文为雪狼博主原创，博客地址：雪狼之夜的博客_CSDN博客-vue,eggjs,js领域博主

原创不易，点个赞呗。