Vue3基础(十ba)___在css中使用props或者计算属性的变量，来实现动态样式

主要使用到了css3中var

<template >
  <div class="container">
    <p
      class="p1"
      :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    >obj2====={
   {
   obj2}}</p>
  </div>
</template>
<script>
import {
    ref, computed } from "vue";
export default {
   
  props: {
   
    width: {
    type: String, default: "300px" }, // 宽度
    height: {
    type: String, default: "100px" }, // 高度
    bgc: {
    type: String, default: "#ccc" } //北京颜色
  },
  setup(p, {
    emit }) {
   
    const obj = ref({
    obj1: "obj111", obj2: "obj222", obj3: "obj333" });
    let objStyle = computed(() => {
   
      return {
    "--fontSize": "22px" };
    });
    return {
    ...obj.value, objStyle};
  }
};
</script>
<style  scoped>
.p1 {
   
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
  font-size: var(--fontSize);
}
.container {
   
  color: var(--main-bg-color);
  font-size: var(--main-padding);
}
</style>

1：
通过props接受变量：然后在页面上使用：只有传入style中才能使用，核心代码：

  props: {
   
    width: {
    type: String, default: "300px" }, // 宽度
    height: {
    type: String, default: "100px" }, // 高度
    bgc: {
    type: String, default: "#ccc" } //北京颜色
  },

 <p class="p1"
    :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    ></p>

CSS:
.p1 {
   
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
}

2：使用computed计算属性，核心代码：
我们可以直接使用computed中返回的对象 --fontSize ==》 22px

let objStyle = computed(() => {
   
      return {
    "--fontSize": "22px" };
    });
.p1 {
   
  font-size: var(--fontSize);
}