49 lines
1006 B
Vue
49 lines
1006 B
Vue
<template> <div class="sma-component" :style="{ width: width + 'px', height: height + 'px' }">
|
|
<img
|
|
src="../equipments/svg/sma.svg"
|
|
:width="width"
|
|
:height="height"
|
|
alt="SMA连接器"
|
|
class="svg-image"
|
|
draggable="false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
size?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 1
|
|
});
|
|
|
|
// 计算实际宽高
|
|
const width = computed(() => 40 * props.size);
|
|
const height = computed(() => 40 * props.size);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sma-component {
|
|
display: block;
|
|
user-select: none;
|
|
-webkit-user-select: none; /* Safari */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* IE/Edge */
|
|
}
|
|
|
|
.svg-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
pointer-events: none; /* 禁止鼠标交互 */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
</style>
|