通过sass变量在vue上实现动态内联样式

vngu2lb8 于 2023-04-21 发布在 Vue.js

关注(0)|答案(1)|浏览(183)

这里我有一个块到mySlide的代码

<div :style="{
               'background-image': `url('~@/assets/img/${slide[2].src}')`,
               'background-color': '$tertiary-light-gray',
             }"
     class="carouselSlide__line__block imageBlock">
</div>

我应该做设置背景图像和上层的半透明背景色
我该怎么做？

vue.js

来源：https://stackoverflow.com/questions/76003710/dynamic-inline-style-on-vue-by-sass-variables

1条答案

按热度按时间

mhd8tkvw1#

在样式属性中使用SCSS是不起作用的。你可以在你的css中使用v-bind来设置你的值。

<div class="carouselSlide__line__block imageBlock"></div>

<script setup>
const image = computed(() => `url('~@/assets/img/${slide[2].src}')`);
</script>

<style scoped lang="scss">
.imageBlock {
  background-image: v-bind(image);
  background-color: $tertiary-light-gray;
}
</style>

赞(0）回复(0）举报 2023-04-21

我来回答

通过sass变量在vue上实现动态内联样式

1条答案

相关问题

热门标签

最新问答