[Vue2组件]三角形角标

[Vue2组件]三角形角标

<template><div class="ys-subscript" :style="svgStyle"><svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><!-- 三角形背景 - 右上角区域 --><polygon points="0,0 200,0 200,200" :fill="color" stroke="none" /><!-- 文字 - 位于右上角三角形的中心 --><textx="133"y="67"text-anchor="middle"dominant-baseline="middle":fill="fontColor"font-family="Arial, sans-serif"font-size="50"font-weight="bold"transform="rotate(45 133 67)">{{ text }}</text></svg></div>
</template><script>
export default {name: 'YsSubscript',props: {// 文字text: {type: String,default: 'NEW'},// 背景色color: {type: String,default: '#67C23A'},// 大小size: {type: [String, Number],default: '30px'},// 文字颜色fontColor: {type: String,default: '#ffffff'},offsetY: {type: [Number, String],default: 0},offsetX: {type: [Number, String],default: 0}},computed: {svgStyle() {const size = typeof this.size === 'number' ? `${this.size}px` : this.sizeconst offsetY = typeof this.offsetY === 'number' ? `${this.offsetY}px` : this.offsetYconst offsetX = typeof this.offsetX === 'number' ? `${this.offsetX}px` : this.offsetXreturn {width: size,height: size,top: offsetY,right: offsetX}}}
}
</script><style scoped>
.ys-subscript {position: absolute;
}
.ys-subscript svg {width: 100%;height: 100%;
}
</style>