mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<div class="shape-item-thumbnail">
|
|
<div class="shape-content">
|
|
<svg
|
|
overflow="visible"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<g
|
|
:transform="`scale(${18 / shape.viewBox[0]}, ${18 / shape.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`"
|
|
>
|
|
<path
|
|
class="shape-path"
|
|
:class="{ 'outlined': shape.outlined }"
|
|
vector-effect="non-scaling-stroke"
|
|
stroke-linecap="butt"
|
|
stroke-miterlimit="8"
|
|
:fill="shape.outlined ? '#999' : 'transparent'"
|
|
:stroke="shape.outlined ? 'transparent' : '#999'"
|
|
stroke-width="2"
|
|
:d="shape.path"
|
|
></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { PropType } from 'vue'
|
|
import { ShapePoolItem } from '@/configs/shapes'
|
|
|
|
defineProps({
|
|
shape: {
|
|
type: Object as PropType<ShapePoolItem>,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shape-item-thumbnail {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.shape-content {
|
|
@include absolute-0();
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&:hover .shape-path {
|
|
&:not(.outlined) {
|
|
stroke: $themeColor;
|
|
}
|
|
&.outlined {
|
|
fill: $themeColor;
|
|
}
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
</style> |