<script lang="ts" setup>
|
import { basicComponents, chartComponents, layoutComponents, systemComponents } from '../helper/componentMap';
|
|
const emit = defineEmits(['addComponent']);
|
const componentsList = [
|
{ label: '布局控件', jnpfKey: 'layout', icon: 'icon-ym icon-ym-generator-function', list: layoutComponents },
|
{ label: '基础控件', jnpfKey: 'basic', icon: 'icon-ym icon-ym-tree-department', list: basicComponents },
|
{ label: '系统控件', jnpfKey: 'system', icon: 'icon-ym icon-ym-tree-user2', list: systemComponents },
|
{ label: '图表控件', jnpfKey: 'chart', icon: 'icon-ym icon-ym-file-photo', list: chartComponents },
|
];
|
|
function handleAddComponent(val) {
|
emit('addComponent', val);
|
}
|
</script>
|
<template>
|
<div>
|
<a-dropdown placement="bottom" trigger="click">
|
<a-button pre-icon="icon-ym icon-ym-btn-add">添加控件</a-button>
|
<template #overlay>
|
<a-menu trigger-sub-menu-action="click">
|
<a-sub-menu class="portal-menu-item" v-for="(item, index) in componentsList" :key="index">
|
<template #title>
|
<span class="flex items-center">
|
<i :class="`${item.icon} mr-1`"></i>
|
<span>{{ item.label }}</span>
|
</span>
|
</template>
|
<a-menu-item v-for="(it, childIndex) in item.list" :key="childIndex" @click="handleAddComponent(it)">
|
<span class="flex items-center">
|
<i :class="`${it.icon} mr-1`"></i>
|
<span>{{ it.label }}</span>
|
</span>
|
</a-menu-item>
|
</a-sub-menu>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
</div>
|
</template>
|
<style lang="scss">
|
.portal-menu-item {
|
.ant-dropdown-menu-submenu-arrow {
|
display: none !important;
|
}
|
}
|
</style>
|
