CMVR-IOT-UI/src/views/flow/components/OuterNode.vue

<template>
    <div class="node__box">
        <component :is="componentId" :model="props.model" :properties="props.properties" ref="nodeRef" @contentChange="contentChange"></component>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
// import ArmNode from '../nodes/mechanical/arm.vue';

const props = defineProps({
  model: Object,
  properties: Object,
  component: Object,
});

const emits = defineEmits(['contentChange', 'bindRef'])

const componentId = ref(props.component)

const contentChange = () => {
    emits('contentChange')
}

const nodeRef = ref()
onMounted(() => {
    emits('bindRef', nodeRef.value)
})
</script>

<style lang="scss" scoped>
.node__box {
    width: 320px;
    height: auto;
    background: #fff;
    padding: 12px;
    cursor: default;
    border-radius: 12px;
    border: 2px solid white;
    box-shadow: 0 5px 15px 0#00000008;
    position: relative;
}
</style>