43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :class="$attrs">
|
|
<rect :width="width" :height="height" :rx="props.roundCorner" fill="#222222" />
|
|
</svg>
|
|
<Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId && !!slot.default">
|
|
<slot></slot>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, inject } from "vue";
|
|
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
|
|
|
|
export interface Props {
|
|
size?: number;
|
|
width?: number;
|
|
height?: number;
|
|
roundCorner?: number;
|
|
componentId?: string;
|
|
}
|
|
|
|
const slot = defineSlots();
|
|
const props = withDefaults(defineProps<Props>(), getDefaultProps());
|
|
const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
|
|
|
|
// 计算实际宽高
|
|
const width = computed(() => props.width * props.size);
|
|
const height = computed(() => props.height * props.size);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export function getDefaultProps(): Props {
|
|
return {
|
|
size: 1,
|
|
width: 200,
|
|
height: 200,
|
|
roundCorner: 20,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="postcss"></style>
|