我try 将v-绑定与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>

使用这段代码,计算的宽度是正确的,但是掩码URL不是.

我如何才能以正确的方式传递该值?

推荐答案

要使用url()作为css变量,您需要在定义时指定此函数:

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

Vue SFC Playground

Html相关问答推荐

如何防止SVG图标出现断行?

Select 包含iframe的图形<><>

窗口对象中是否有对<;html&>根元素的引用?

Tailwincss:自动设置网格高度

如何使用html和css将两个项目垂直对齐

防止SVG边框半径zoom

如何在div中淡入和淡出渐变背景?

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

在每个列宽由带有固定值的minmax()函数定义的网格中,CSS如何为列分配空间?

HTMLTag属性内的svelte+TS类型声明

你将如何为手机制作导航栏

Chatbox底部显示新消息,并向上推送旧消息

如何使背景图像在面包屑中相互重叠

如果使用复选框属性更改,如何防止事件更改?

如何创建淡出研磨背景

第 117 行的块标记无效:endblock,应为empty或endfor.您是否忘记注册或加载此标签?

CSS Grid 布局:1 大图和 3 小图

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

获取 div 中每个元素的 href 并使用它

th 内的 div 标签没有占据全高