Vue CSS 变量注入

[xlearns]

vue3中支持js变量传入到css中

<template>
	<div class="header">测试内容</div>
</template>

<script>
export default {
	data() {
		return {
			color: 'red',
			font: {
				size: '24px'
			}
		}
	}
}
</script>

<style lang="less" scoped>
.header {
	color: v-bind(color);
	font-size: v-bind('font.size');
}
</style>

NoticeBar

<template>
  <h1 class="main-box">
    <div class="img-box">
      <!-- <svg t="1648797057352" viewBox="0 0 1024 1024" class="img">
        <path
          d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z"
          p-id="2284"
          fill="#333333"
        ></path>
        <path
          d="M744.055658 192.799074c-4.814656-2.889817-9.601682-5.251607-15.442714-5.251607-14.262842 0-25.758664 11.559267-25.758664 25.805736 0 10.285251 6.088672 18.519796 14.6957 23.195282 94.679359 55.247278 158.344355 157.787676 158.344355 275.30416 0 117.424386-63.605643 219.931015-158.159136 275.18034-8.29492 4.538363-15.442714 13.050224-15.442714 23.583115 0 14.261818 11.559267 25.820062 25.791409 25.820062 5.716188 0 10.252505-2.202155 15.22475-5.063319 109.871363-64.133669 183.764304-183.143157 183.764304-319.520197C927.074995 375.785665 853.495186 257.010515 744.055658 192.799074z"
          p-id="2285"
          fill="#333333"
        ></path>
        <path
          d="M773.946432 511.867994c0-79.96524-43.344181-149.739373-107.821681-187.289594-2.920516-1.52268-9.785877-4.520967-14.603603-4.520967-14.325263 0-25.914206 11.589966-25.914206 25.89988 0 9.616008 5.096065 18.176988 12.865006 22.666232 49.839105 28.307719 83.45983 81.829703 83.45983 143.244448 0 62.472843-34.801621 116.817566-86.070284 144.750755-7.457856 4.538363-12.397355 12.803607-12.397355 22.188348 0 14.325263 11.588943 25.943882 25.882484 25.943882 6.090718 0.031722 13.33061-3.542686 13.33061-3.542686C729.048873 664.171772 773.946432 593.294514 773.946432 511.867994z"
          p-id="2286"
          fill="#333333"
        ></path>
        <path
          d="M541.3694 124.672464c-10.846022-5.219885-23.740704-3.790326-33.215496 3.712555-0.435928 0.358157-46.423309 36.914748-97.195669 74.296123-88.308255 65.081251-114.036219 75.925227-119.257128 77.649498l-110.6194 0c-0.63752 0-1.243317 0.062422-1.879813 0.093121l-56.504922 0c-14.231119 0-25.775037 11.543917-25.775037 25.775037l0 411.697573c0 14.261818 11.512195 25.761734 25.775037 25.761734l189.511191 0.027629c5.096065 1.865487 29.395494 13.0799 107.761306 76.999698 45.613874 37.162388 86.505189 73.485665 86.940095 73.829496 5.841032 5.218862 13.298887 7.92039 20.820188 7.92039 4.349051 0 8.729825-0.930185 12.862959-2.764973 11.277858-5.064342 18.517749-16.252149 18.517749-28.619828 0 0 0.031722-97.257068 0.031722-132.212184 0.808412-2.484587 1.213641-5.127787 1.213641-7.863085 0-2.792603-1.245364-578.026786-1.245364-578.026786C559.110459 140.892891 552.214399 129.924071 541.3694 124.672464zM508.308423 726.470653c0 1.494027-0.467651 94.617961-0.467651 94.617961-13.889335-11.745509-29.332049-24.64019-45.240367-37.507242-104.59008-84.702124-130.505309-91.816149-148.030451-91.816149-0.372483 0-0.683569 0.091074-1.025353 0.091074s-0.652869-0.091074-1.025353-0.091074L170.394297 691.765223c-18.037818 0-22.248723-5.128811-22.248723-23.246447L148.145573 352.559685c0-12.32163 1.461281-20.057825 16.298198-20.057825l128.065747 0c17.090237 0 43.315528-6.991228 157.787676-90.839915 20.383236-14.914688 40.330544-29.938869 57.544601-43.113937 0 0 0.373507 445.207781 0.467651 521.368368C507.779374 722.028481 508.308423 724.234729 508.308423 726.470653z"
          p-id="2287"
          fill="#333333"
        ></path>
      </svg> -->
      <img src="@a/喇叭@2x.png" alt="" class="img" />
    </div>
    <span class="content" v-html="content"></span>
  </h1>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue"

export default defineComponent({
  props: {
    content: {
      type: String,
    },
    background: {
      type: String,
      default: "#fff1f0",
    },
    timer: {
      type: String,
      default: "15s",
    },
    contentWidth: {
      type: String,
      default: "200px",
    },
  },
  setup(props) {
    const toL = computed({
      get() {
        return "-" + props.contentWidth
      },
      set() {},
    })
    return {
      toL,
    }
  },
})
</script>

<style lang="scss" scoped>
.main-box {
  background: v-bind(background);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: red;
  height: 40px;
  border-radius: 4px;
  box-sizing: border-box;
  span {
    color: red;
  }
}

.img {
  width: 16px;
  height: 16px;
  margin-right: 11px;
}
.img-box {
  background: v-bind(background);
  padding-left: 16px;
  z-index: 100;
  height: 100%;
  display: flex;
  align-items: center;
}
.content {
  position: absolute;
  left: 100%;
  display: block;
  width: v-bind(contentWidth);
  animation: identifier v-bind("timer") infinite linear;
}
@keyframes identifier {
  to {
    left: v-bind(toL);
  }
  from {
    left: 100%;
  }
}
</style>