在 Vue 3 中使用 v-bind 将计算属性传递给 css url()

Question

我尝试使用 v-bind 与 Vue 3 和 Nuxt 将计算的属性值传递给 css 中的 url():

<template>
  <div class="box-container"></div>
</template>

<script lang="ts" setup>

const props = defineProps ( {
  maskImage:  { type: String, default: ''},
  width:      { type: Number, default: 100 }
})


const width = computed(()=> props.width + 'px')
const maskImage = computed(() => `assets/sprite/svg/${props.maskImage}.svg`)

</script>


<style lang="sass" scoped>

.box-container
  background-color: blue
  width: v-bind(width)
  -webkit-mask-image: url(v-bind(maskImage))
  -webkit-mask-position: center
  -webkit-mask-repeat: no-repeat
</style>

使用此代码，计算出的宽度可以正常工作，但掩码网址却不能。在检查器中，我可以看到掩码图像中设置了一种哈希值：

-webkit-mask-image: url(var(--20ff1bb8-maskImage))

如何以正确的方式传递值？

Answer 1

用

url()

制作css变量，需要在定义时指定这个函数：

const maskImage = computed(() => 'url(https://mdn.github.io/css-examples/masking/star.svg)');

Vue SFC 游乐场