Vue3中如何在CSS url()内使用自定义动态ID？

Vue 单文件组件 <style> 标签内的 v-bind 语法，会自动将绑定值编译为 CSS 自定义变量（var(--自定义变量名) 格式），而 CSS 规范要求 url() 函数的参数不能是动态的 var() 类型，因此原有写法无法被浏览器识别。

方案1：内联动态绑定 style（兼容性最好，推荐） #

直接在模板中给目标元素绑定动态 style，拼接完整的 clip-path 属性值，不需要在 <style> 里写裁剪规则：

<template>
   <div>
      <svg class="svg">
         <clipPath
            :id="'clipping_'+ UID"
            clipPathUnits="userSpaceOnUse">
            <circle
               cx= "20"
               cy= "20"
               r="20"/>
         </clipPath>
      </svg>
      <!-- 新增动态style绑定 -->
      <div class="foreground" :style="foregroundStyle"/>
   </div>
</template>

<script>
export default {
  name: 'myComponent',
  data() {
    return {
      // 也可以直接用Vue内置的实例唯一ID，避免复用冲突：UID: this._uid
      UID: "asdf",
    };
  },
  computed: {
    foregroundStyle() {
      const fullClipPath = `url(#clipping_${this.UID})`
      return {
        'clip-path': fullClipPath,
        '-webkit-clip-path': fullClipPath
      }
    }
  }
};
</script>

<style scoped>
.foreground {
  width: 100%;
  height: 40px;
  background: hsl(356, 0%, 53%);
  /* 删掉原来的clip-path相关代码 */
}

.svg {
  width: 100%;
  height: 40px;
}
</style>

方案2：在 <style> 中直接绑定完整属性值 #

如果不想写内联样式，可以提前在计算属性中拼接好带 url() 的完整属性值，直接在 <style> 中绑定整个值：

<script>
export default {
  name: 'myComponent',
  data() {
    return {
      UID: "asdf",
    };
  },
  computed: {
    // 提前拼接完整的clip-path值
    clipPathValue() {
      return `url(#clipping_${this.UID})`
    }
  }
};
</script>

<style scoped>
.foreground {
  width: 100%;
  height: 40px;
  background: hsl(356, 0%, 53%);
  /* 直接绑定整个属性值，不要把v-bind写在url()内部 */
  clip-path: v-bind('clipPathValue');
  -webkit-clip-path: v-bind('clipPathValue');
}
</style>

如果组件会被多次复用，建议直接使用 Vue 每个实例自带的唯一标识 this._uid 作为 UID 的值，避免多个组件实例生成重复的 ID 导致裁剪规则冲突。

内容的提问来源于stack exchange，提问作者gpreux