在业务开发中经常遇到功能类似但是UI不一致的组件，如果使用多个v-if的话页面会变的及其啰嗦，所以可以使用component组件来统一渲染。
- 创建commonComponents
<template>
<div>
<colArrow
v-if="getComponent && useCol"
class="lc-ml-8"
@toToggleComponent="toToggleComponent"
/>
<component
:is="getComponent"
:active="active"
:nodeName="nodeName"
@update:node-name="updateNodeNameByNodeId"
@openSetting="openSettingPanel"
@delete="deleteComponent"
/>
</div>
</template>
<script setup lang="ts">
import ColArrow from '@/views/lowCodeDetail/arrowComponents/colArrow.vue'
import { computed } from 'vue'
import { COMPONENTTYPE } from '@/views/lowCodeDetail/hooks/componentType'
const props = defineProps({
// 是否使用内部的线;即colArrow组件
useCol: {
type: Boolean,
default: true
},
// 是否处于活跃状态
active: Boolean,
// node的名字
nodeName: String,
// node的类型
nodeType: String
})
const emit = defineEmits([
'toToggleComponent',
'updateNodeNameByNodeId',
'openSettingPanel',
'deleteComponent',
'update:node-name'
])
const getComponent = computed(() => {
switch (props.nodeType) {
case COMPONENTTYPE.API:
return 'ApiComponents'
case COMPONENTTYPE.NOTICE:
return 'NoticeComponents'
case COMPONENTTYPE.SCRIPT:
return 'ScriptComponents'
case COMPONENTTYPE.JSON:
return 'JsonComponents'
default:
return null
}
})
const toToggleComponent = () => {
emit('toToggleComponent')
}
const updateNodeNameByNodeId = (val: string) => {
emit('update:node-name', val)
emit('updateNodeNameByNodeId', val)
}
const openSettingPanel = () => {
emit('openSettingPanel')
}
const deleteComponent = () => {
emit('deleteComponent')
}
</script>
<style scoped lang="scss"></style>
- 创建注册文件
register.ts文件
import { App } from 'vue'
import lodash from 'lodash'
import ApiComponents from '../components/apiComponents.vue'
import JsonComponents from '../components/jsonComponents.vue'
import NoticeComponents from '../components/noticeComponents.vue'
import ScriptComponents from '../components/scriptComponents.vue'
// 画布通用组件, 即内部不能添加子组件的组件
const components = [
ApiComponents,
JsonComponents,
NoticeComponents,
ScriptComponents
]
const commonComponents = (app: App): void => {
components.forEach((component) => {
app.component(lodash.upperFirst(component.__name), component)
})
}
export default commonComponents
- 在main.ts中注册
const app = createApp()
commonComponents(app)
- 在业务文件中使用
<common-component
:active="item.active"
v-model:node-name="item.nodeName"
:node-type="item.nodeType"
@toToggleComponent="toToggleComponent(item.nodeId)"
@update:node-name="
(val) => updateNodeNameByNodeId(item.nodeId, val)
"
@openSetting="openSettingPanel(item)"
@delete="deleteComponent(item)"
/>
