阅读数:77 评论数:0

一、在scss中使用js变量值（使用v-bind双向绑定）

<template>
	<div class="content" :style="{'--color': themeColor}">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="themeColor='pink'">修改颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {
			return {
				themeColor: 'red'
			}
		},
	}
</script>

<style lang="scss">
	.content {
		// --color 在content及其子元素都可以使用
		width: 100%;
		height: 200px;
		background-color: var(--color);

		.title {
			background-color: white;
			color: var(--color);
		}
	}
</style>

二、变量在style标签定义，在js进行修改

<template>
	<div class="content" ref="content">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="changeBgColor">修改背景颜色</button>
	<button @click="changeFontColor">修改字体颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {},
		methods: {
			changeBgColor() {
				document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'pink');
			},
			changeFontColor() {
				// --font-color 在哪个元素定义的就在哪个元素修改
				this.$refs.content.style.setProperty("--font-color", 'pink');
			}
		},
	}
</script>

<style lang="scss">
	// --label-font-color：为js操作此变量需要用到的KEY
	// --red：默认css属性值
	$themeBgColor: var(--bg-color, red);

	.content {
		--font-color: red;
		width: 100%;
		height: 200px;
		background-color: $themeBgColor;

		.title {
			background-color: white;
			color: var(--font-color);
		}
	}
</style>

三、vue3可以直接使用v-bind绑定

<template>
	<div class="content" ref="content">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="changeBgColor">修改背景颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {
			return {
				themeColor: 'red'
			}
		},
		methods: {
			changeBgColor() {
				this.themeColor = 'pink';
			},
		}	
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 200px;
		background-color: v-bind('themeColor');
	}
</style>

注意在SCSS中，无法直接访问在defineProps中定义的js变量，这是因为scss是在构建时编译的，而defineProps是在运行时进行的，这时可以使用内联样式:style

<template>
  <div 
    :style="{
      backgroundImage: isHovered ? 'url(' + hoverImageUrl + ')' : 'url(' + defaultImageUrl + ')'
    }"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImageUrl: 'path/to/default-image.jpg',
      hoverImageUrl: 'path/to/hover-image.jpg',
      isHovered: false
    };
  },
  methods: {
    handleMouseOver() {
      this.isHovered = true;
    },
    handleMouseOut() {
      this.isHovered = false;
    }
  }
};
</script>