UNPKG

@mineadmin/form

Version:

基于element plus的form组件,进行封装,提供方便、灵活的配置和使用方式

78 lines (77 loc) 2.82 kB
import type { MaModel } from './index'; import type { Component, VNode } from 'vue'; import type { FormItemRule } from 'element-plus'; import { Arrayable } from 'element-plus/es/utils'; export type ComponentName = 'Radio' | 'RadioButton' | 'Checkbox' | 'CheckboxButton' | 'Input' | 'Autocomplete' | 'InputNumber' | 'Select' | 'Cascader' | 'Switch' | 'Slider' | 'TimePicker' | 'DatePicker' | 'Rate' | 'ColorPicker' | 'Mention' | 'Transfer' | 'TimeSelect' | 'SelectV2' | 'TreeSelect' | 'Upload'; export type state = (item: MaFormItem, model: MaModel) => boolean; /** * @description `element-plus` 的 `form-item` 属性,去掉了 `label` 和 `prop` 属性,移到了 `MaFormItem` 中这里的属性在 `MaFormItem` 中的 `itemProps` 里传入 * @see {@link https://element-plus.org/zh-CN/component/form.html#formitem-attributes} */ export interface FormItem { labelPosition?: 'left' | 'right' | 'top'; labelWidth?: string | number; required?: boolean; rules?: Arrayable<FormItemRule>; error?: string; showMessage?: boolean; inlineMessage?: string | boolean; size?: '' | 'large' | 'default' | 'small'; for?: string; validateStatus?: '' | 'error' | 'validating' | 'success'; [key: string]: any; } export type renderArgs = { item: MaFormItem; formData: any; }; export type renderCustomer = (data: renderArgs) => VNode | Component; export type renderType = renderCustomer | string | ComponentName | Component | VNode; export type itemSlotType = (arg: { [key: string]: any; }) => any; export type renderSlotType = (...args: any[]) => any; export interface colsAttr { span?: number; offset?: number; pull?: number; push?: number; } /** * @description `MaFormItem` 的属性列表 */ export interface MaFormItem { label?: string | (() => string); prop?: string | (() => string); hide?: boolean | state; show?: boolean | state; cols?: { span?: number; offset?: number; push?: number; pull?: number; xs?: number | colsAttr; sm?: number | colsAttr; md?: number | colsAttr; lg?: number | colsAttr; xl?: number | colsAttr; tag?: string; }; itemProps?: FormItem; itemSlots?: { default?: () => any; error?: itemSlotType; label?: itemSlotType; }; /** * 设置要渲染的组件,可设置 `element plus` 的所有 `form` 组件,例如:`input`, `datePicker` * 也可以传入 `tsx`, `jsx` 语法的虚拟dom * 也可以传入一个组件,函数式,例如:() => ElInput, * * [ tsx, jsx 自定义组件,请手动绑定v-model] */ render?: renderType; renderProps?: Record<string, any>; renderSlots?: Record<string, renderSlotType>; children?: MaFormItem[]; }