Vue3 中组件传递 + css 变量的组合

---

需求

开发一个箭头组件，根据父组件传递的 props 来修改 css 的颜色

效果如下图所示

---

代码逻辑

---

代码

父组件：

<Arrow color="red" />

子组件：

<template><div class="arrow" :style="{ '--arrow-color': color, '--arrow-width': `${width}px`,'--arrow-rotation': `${rotation}deg`}"></div>
</template><script lang='ts' setup>
import { defineProps } from 'vue';const props = defineProps({color: {type: String,default: 'black'},width: {type: Number,default: 30},rotation: {type: Number,default: 0  // 旋转角度，默认不旋转}
});
</script><style scoped>
.arrow {display: inline-block;position: relative;margin: 10px;width: var(--arrow-width);transform: rotate(var(--arrow-rotation));  /* 添加旋转样式 */
}.arrow::before {content: '';position: absolute;top: 50%;left: 0;width: var(--arrow-width);border-top: 2px dotted var(--arrow-color);transform: translateY(-50%);
}.arrow::after {content: '';position: absolute;top: 50%;left: calc(var(--arrow-width) - 8px);width: 0;height: 0;border-left: 10px solid var(--arrow-color);border-top: 7px solid transparent;border-bottom: 7px solid transparent;transform: translateY(-50%);
}
</style>

---

参考

1. 使用 CSS 自定义属性（变量） https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties