69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
||
<div class="eth-component" :style="{ width: width + 'px', height: height + 'px' }">
|
||
<img src="../equipments/svg/eth.svg" :width="width" :height="height" alt="以太网接口" class="svg-image"
|
||
draggable="false" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
|
||
interface Props {
|
||
size?: number;
|
||
devIPAddress?: string;
|
||
devPort?: string;
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), getDefaultProps());
|
||
|
||
// 计算实际宽高
|
||
const width = computed(() => 100 * props.size);
|
||
const height = computed(() => 60 * props.size);
|
||
|
||
// 向外暴露方法
|
||
defineExpose({
|
||
getInfo: () => ({
|
||
size: props.size,
|
||
type: "ETH",
|
||
}),
|
||
// 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
|
||
getPinPosition: () => null,
|
||
});
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
// 添加一个静态方法来获取默认props
|
||
export function getDefaultProps() {
|
||
return {
|
||
size: 1,
|
||
devIPAddress: "127.0.0.1",
|
||
devPort: "1234",
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.eth-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>
|