VUE3中CSS如何使用后台传过来的变量？

Question

最近在弄项目重构,里面所有的请求地址(包括网络请求地址,样式地址,背景图片地址,图片地址)都是拼接而成。具体的格式像:background-image:url($!imageWebServer/$!config.store_login_pic.path/$!config.store_login_pic.name);这样，这是在css中的引用。现在改用VUE3+ElementPlus来进行重构，现在后端提供 imageWebServer 和 config 参数，这些参数在所有css中是共用的，我该如何进行引用和拼接？

尝试代码如下，参数暂时写死

报错如下

Answer 1

简单的使用可以在 style 中使用用 v-bind 绑定你的JS变量
👉 #CSS 中的 v-bind() - 单文件组件 CSS 功能 | Vue.js

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

会在编译时期给你替换成 CSS变量 的形式在CSS样式使用。
例如这样 👇

<div id="app" data-v-app="">
    <p data-v-7ba5bd90="" style="--7ba5bd90-theme\.color: red;">hello</p>
</div>
<style css="">
p[data-v-7ba5bd90] {
  color: var(--7ba5bd90-theme\.color);
}
</style>

所以如果你动态变更了JS中的样式变量页面中的样式也会同步变更 👇

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})

// 模拟接口请求变更样式变量
setTimeout(() => {
  theme.value.color = 'green'
}, 5000)
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

Vue SFC Playground Demo

Answer 2

通用的放在store，比如服务器地址，地址直接拼接就好了吧

background-image: url(`${websiteIP}${imageUrl}`);

Answer 3

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const bgImage = ref('url(https://file.ylwg.cn/upload/system/6dc95640-ba54-4366-b173-01282b558f2d.jpg)')
</script>

<style lang="scss">
.about {
  background-image: v-bind(bgImage);
}
</style>