24d14c2841
* refactor: global components can be customized * refactor: remove use Toast and reconstruct the form adapter
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
/**
|
|
* 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
|
|
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
|
|
*/
|
|
|
|
import type { BaseFormComponentType } from '@vben/common-ui';
|
|
|
|
import type { Component, SetupContext } from 'vue';
|
|
import { h } from 'vue';
|
|
|
|
import { globalShareState } from '@vben/common-ui';
|
|
import { $t } from '@vben/locales';
|
|
|
|
import {
|
|
ElButton,
|
|
ElCheckbox,
|
|
ElCheckboxGroup,
|
|
ElDivider,
|
|
ElInput,
|
|
ElInputNumber,
|
|
ElNotification,
|
|
ElRadioGroup,
|
|
ElSelect,
|
|
ElSpace,
|
|
ElSwitch,
|
|
ElTimePicker,
|
|
ElTreeSelect,
|
|
ElUpload,
|
|
} from 'element-plus';
|
|
|
|
const withDefaultPlaceholder = <T extends Component>(
|
|
component: T,
|
|
type: 'input' | 'select',
|
|
) => {
|
|
return (props: any, { attrs, slots }: Omit<SetupContext, 'expose'>) => {
|
|
const placeholder = props?.placeholder || $t(`placeholder.${type}`);
|
|
return h(component, { ...props, ...attrs, placeholder }, slots);
|
|
};
|
|
};
|
|
|
|
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
|
export type ComponentType =
|
|
| 'Checkbox'
|
|
| 'CheckboxGroup'
|
|
| 'DatePicker'
|
|
| 'Divider'
|
|
| 'Input'
|
|
| 'InputNumber'
|
|
| 'RadioGroup'
|
|
| 'Select'
|
|
| 'Space'
|
|
| 'Switch'
|
|
| 'TimePicker'
|
|
| 'TreeSelect'
|
|
| 'Upload'
|
|
| BaseFormComponentType;
|
|
|
|
async function initComponentAdapter() {
|
|
const components: Partial<Record<ComponentType, Component>> = {
|
|
// 如果你的组件体积比较大，可以使用异步加载
|
|
// Button: () =>
|
|
// import('xxx').then((res) => res.Button),
|
|
|
|
Checkbox: ElCheckbox,
|
|
CheckboxGroup: ElCheckboxGroup,
|
|
// 自定义默认按钮
|
|
DefaulButton: (props, { attrs, slots }) => {
|
|
return h(ElButton, { ...props, attrs, type: 'info' }, slots);
|
|
},
|
|
// 自定义主要按钮
|
|
PrimaryButton: (props, { attrs, slots }) => {
|
|
return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
|
|
},
|
|
Divider: ElDivider,
|
|
Input: withDefaultPlaceholder(ElInput, 'input'),
|
|
InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
|
|
RadioGroup: ElRadioGroup,
|
|
Select: withDefaultPlaceholder(ElSelect, 'select'),
|
|
Space: ElSpace,
|
|
Switch: ElSwitch,
|
|
TimePicker: ElTimePicker,
|
|
TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
|
|
Upload: ElUpload,
|
|
};
|
|
|
|
// 将组件注册到全局共享状态中
|
|
globalShareState.setComponents(components);
|
|
|
|
// 定义全局共享状态中的消息提示
|
|
globalShareState.defineMessage({
|
|
// 复制成功消息提示
|
|
copyPreferencesSuccess: (title, content) => {
|
|
ElNotification({
|
|
title,
|
|
message: content,
|
|
position: 'bottom-right',
|
|
duration: 0,
|
|
type: 'success',
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
export { initComponentAdapter };
|