vue 切换主题颜色

最新推荐文章于 2024-07-15 08:00:42 发布

zyboooo

最新推荐文章于 2024-07-15 08:00:42 发布

阅读量380

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_48199777/article/details/119916172

版权

这篇博客介绍了如何在Sass中定义多个背景色变量，并通过创建一个混合（mixin）来实现不同主题背景色的切换。在Vue组件中，通过改变`data-theme`属性来调用不同的背景色。示例展示了四个按钮，分别对应四种背景色，点击按钮可以更改整个文档的背景颜色。

摘要由CSDN通过智能技术生成

切换背景色–sass

// test.sass
$bmg1:red;
$bmg2:black;
$bmg3:green;
$bmg4:purple;
@mixins changes($color){
	background:$color;
	[data-theme='backgroundcolor1']&{
		background:$bmg1;
	}
	[data-theme='backgroundcolor2']&{
		background:$bmg2;
	}
	[data-theme='backgroundcolor3']&{
		background:$bmg3;
	}
	[data-theme='backgroundcolor4']&{
		background:$bmg4;
	}
}

//test.vue

    <el-button type="primary" @click="changebackground">点击1</el-button>
    <el-button type="primary" @click="changebackground2">点击2</el-button>
    <el-button type="primary" @click="changebackground3">点击3</el-button>
    <el-button type="primary" @click="changebackground4">点击4</el-button>

changebackground(){
      window.document.documentElement.setAttribute('data-theme','backgroundcolor1');
}
changebackground2(){
      window.document.documentElement.setAttribute('data-theme','backgroundcolor2');
}
changebackground3(){
      window.document.documentElement.setAttribute('data-theme','backgroundcolor3');
}
changebackground4(){
      window.document.documentElement.setAttribute('data-theme','backgroundcolor4');
}




@import '../http/test.scss';
.box{
	@include changes($bmg1);
}