Vue3 -如何在CSS url()中使用自定义ID？
Vue3 -如何在CSS url()中使用自定义ID？
提问于 2021-09-06 19:45:32
我有一个vue组件，我在其中定义了一个用于裁剪:id="'clipping_'+ UID"的id。但是当我尝试在CSS clip-path: url(v-bind("'#clipping_' + UID");中使用它时，它被看作是一个var()，这在url()中是不允许的。
声明或访问此id的正确方式是什么？谢谢。
<template>
<div>
<svg class="svg">
<clipPath
:id="'clipping_'+ UID"
clipPathUnits="userSpaceOnUse">
<circle
cx= "20"
cy= "20"
r="20"/>
</clipPath>
</svg>
<div class="foreground"/>
</div>
</template>
<script>
export default
{
name: 'myComponent',
data: function ()
{
return {
UID: "asdf",
};
}
};
</script>
<style scoped>
.foreground {
width: 100%;
height: 40px;
background: hsl(356, 0%, 53%);
clip-path: url(v-bind("'#clipping_' + UID");
-webkit-clip-path: url(v-bind("'#clipping_' + UID");
}
.svg {
width: 100%;
height: 40px;
}
</style>回答 1
Stack Overflow用户
发布于 2021-09-09 10:48:33
我刚刚发现，如果url()中不能包含var()，则可能出现相反的情况。
clip-path: v-bind("'url(#clipping_' + UID + ')'");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69079631
复制相关文章
相似问题
腾讯云开发者
