文章目录
需求
开发一个箭头组件,根据父组件传递的 props 来修改 css 的颜色
效果如下图所示
代码逻辑
代码
父组件:
html
<Arrow color="red" />
子组件:
html
<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