uniapp将scss变量与元素属性进行绑定和js控制css属性

1. 将scss中定义的颜色等信息绑定到元素属性

<template>
	<view class="content-privacy" :style="{'justify-content': justifyContent}">
		<button open-type="agreePrivacyAuthorization" @click="btnClick">
			<view :class="['radio', value && 'on']">
				 <icon type="success" color="var(--primary-color)" size="16" v-show="value" />
			</view>
			<text>已阅读并同意</text>
		</button>
		<text class="privacy-text" @click="toPrivacy">《xxxx隐私政策》</text>
	</view>
</template>
<style lang="scss" scoped>
	$overall-color: red;
	:root {
		--primary-color: #{$overall-color};
	}
</style>

2. js控制css属性

<template>
	<view class="content-privacy" :style="styleStr">
		<button open-type="agreePrivacyAuthorization" @click="btnClick">
			<view :class="['radio', value && 'on']">
				 <icon type="success" size="16" v-show="value" />
			</view>
			<text>已阅读并同意</text>
		</button>
		<text class="privacy-text" @click="toPrivacy">《xxxx隐私政策》</text>
	</view>
</template>
<script>
	// 隐私政策
	export default {
		data() {
			return {
				styleStr: '--bgcolor: yellow;'
			};
		}
	}
</script>
<style lang="scss" scoped>
	.content-privacy {
		display: flex;
		align-items: center;
		padding: 10px 0;
		font-size: 26rpx;

		button {
			background-color: transparent;
			border: none;
			color: var(--bgcolor);
			padding: 0;
		}
</style>

全局设置变量（主题色的切换）：

• 在main.js中设置全局变量（不推荐）

// main.js
Vue.prototype.$overall_var.color = "red";

• 通过Vuex进行存储全局变量，然后使用mixins进行全局混入