refactor: streamline component adapter by removing unused imports and adding ApiCheckbox support

pull/58/head
chenminjie 2024-12-12 19:36:08 +08:00
parent 301bc036c6
commit 38c37e37b8
1 changed files with 16 additions and 10 deletions

View File

@ -5,8 +5,6 @@
import type { BaseFormComponentType } from '@vben/common-ui'; import type { BaseFormComponentType } from '@vben/common-ui';
import type { CustomComponentType } from '#/components/form/types';
import type { Component, SetupContext } from 'vue'; import type { Component, SetupContext } from 'vue';
import { h } from 'vue'; import { h } from 'vue';
@ -38,8 +36,6 @@ import {
Upload, Upload,
} from 'ant-design-vue'; } from 'ant-design-vue';
import { registerComponent as registerCustomFormComponent } from '#/components/form/component-map';
const withDefaultPlaceholder = <T extends Component>( const withDefaultPlaceholder = <T extends Component>(
component: T, component: T,
type: 'input' | 'select', type: 'input' | 'select',
@ -52,6 +48,7 @@ const withDefaultPlaceholder = <T extends Component>(
// 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明 // 这里需要自行根据业务组件库进行适配,需要用到的组件都需要在这里类型说明
export type ComponentType = export type ComponentType =
| 'ApiCheckbox'
| 'ApiSelect' | 'ApiSelect'
| 'ApiTreeSelect' | 'ApiTreeSelect'
| 'AutoComplete' | 'AutoComplete'
@ -77,14 +74,26 @@ export type ComponentType =
| 'TimePicker' | 'TimePicker'
| 'TreeSelect' | 'TreeSelect'
| 'Upload' | 'Upload'
| BaseFormComponentType | BaseFormComponentType;
| CustomComponentType;
async function initComponentAdapter() { async function initComponentAdapter() {
const components: Partial<Record<ComponentType, Component>> = { const components: Partial<Record<ComponentType, Component>> = {
// 如果你的组件体积比较大,可以使用异步加载 // 如果你的组件体积比较大,可以使用异步加载
// Button: () => // Button: () =>
// import('xxx').then((res) => res.Button), // import('xxx').then((res) => res.Button),
ApiCheckbox: (props, { attrs, slots }) => {
return h(
ApiComponent,
{
...props,
...attrs,
component: CheckboxGroup,
modelPropName: 'value',
},
slots,
);
},
ApiSelect: (props, { attrs, slots }) => { ApiSelect: (props, { attrs, slots }) => {
return h( return h(
ApiComponent, ApiComponent,
@ -94,8 +103,8 @@ async function initComponentAdapter() {
...attrs, ...attrs,
component: Select, component: Select,
loadingSlot: 'suffixIcon', loadingSlot: 'suffixIcon',
visibleEvent: 'onDropdownVisibleChange',
modelPropName: 'value', modelPropName: 'value',
visibleEvent: 'onVisibleChange',
}, },
slots, slots,
); );
@ -154,9 +163,6 @@ async function initComponentAdapter() {
Upload, Upload,
}; };
// 注册自定义组件
registerCustomFormComponent(components);
// 将组件注册到全局共享状态中 // 将组件注册到全局共享状态中
globalShareState.setComponents(components); globalShareState.setComponents(components);