From 448ac5293e48a03840df2bb0b399a8f02aae666e Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sun, 26 Dec 2021 17:32:33 +0800 Subject: [PATCH] feat(VForm): Add VForm component --- pnpm-lock.yaml | 29 +- src/App.vue | 540 ++++++++++++++---- src/components/Form/src/VForm.vue | 23 +- src/components/Form/src/componentMap.ts | 4 +- .../Form/src/components/useRenderChcekbox.tsx | 20 + .../Form/src/components/useRenderRadio.tsx | 20 + .../Form/src/components/useRenderSelect.tsx | 21 +- src/locales/en.ts | 25 +- src/locales/zh-CN.ts | 23 +- src/styles/{variable.less => variables.less} | 0 src/types/componentType.d.ts | 29 +- 11 files changed, 585 insertions(+), 149 deletions(-) create mode 100644 src/components/Form/src/components/useRenderChcekbox.tsx create mode 100644 src/components/Form/src/components/useRenderRadio.tsx rename src/styles/{variable.less => variables.less} (100%) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75b2a6f..15bd4d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6128,8 +6128,8 @@ packages: vue-i18n: optional: true dependencies: - '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.23 - '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.23 + '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.25 + '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.25 jsonc-eslint-parser: registry.npmmirror.com/jsonc-eslint-parser/1.4.1 source-map: registry.nlark.com/source-map/0.6.1 vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.24 @@ -6185,18 +6185,18 @@ packages: source-map: registry.nlark.com/source-map/0.6.1 dev: false - registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.23: + registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.25: resolution: { - integrity: sha512-qmGN8k5yGGdZ5St8yg8U4Tg2K9Sc6h3BhWCdJKAqQVs5jnfZG+nMtsLVgnJUWkDvhjzyg7/rEOhHm2uJcu4vjw==, + integrity: sha512-/YMG6LmQLvD8uHCJvWLaK0t8exYbek3ya4BZZ99AcM5+JC/JRdLIK8WiVJnGpfrvleQArxvHed4GokS+oWZ5rQ==, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.23.tgz + tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.25.tgz } name: '@intlify/message-compiler' - version: 9.2.0-beta.23 + version: 9.2.0-beta.25 engines: { node: '>= 12' } dependencies: - '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.23 + '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.25 source-map: registry.nlark.com/source-map/0.6.1 dev: true @@ -6240,15 +6240,15 @@ packages: engines: { node: '>= 10' } dev: false - registry.npmmirror.com/@intlify/shared/9.2.0-beta.23: + registry.npmmirror.com/@intlify/shared/9.2.0-beta.25: resolution: { - integrity: sha512-3aELL2KTp1MWKGm2gIUKSagthgKzcK5hpQEFzOwkJ1SAthpTXR7BHeWGEaD+Lj+Pbiz3U8cspvp8s2lFWVbYxg==, + integrity: sha512-I2L05aWh0azr5KwQjLV7gMTN0SrdglgMAfpJniT53Pvvc8l+OTs8IEhdPCQwsbgOravpWt14O7m3deOzw3ln6w==, registry: https://registry.npm.taobao.org/, - tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.23.tgz + tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.25.tgz } name: '@intlify/shared' - version: 9.2.0-beta.23 + version: 9.2.0-beta.25 engines: { node: '>= 12' } dev: true @@ -6274,7 +6274,7 @@ packages: optional: true dependencies: '@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9 - '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.23 + '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.25 '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1 debug: registry.npmmirror.com/debug/4.3.3 fast-glob: registry.nlark.com/fast-glob/3.2.7 @@ -8693,13 +8693,12 @@ packages: registry.npmmirror.com/lodash/4.17.21: resolution: { - integrity: sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=, + integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/download/lodash-4.17.21.tgz } name: lodash version: 4.17.21 - dev: false registry.npmmirror.com/log-update/4.0.0: resolution: @@ -10291,7 +10290,7 @@ packages: version: 0.3.2 dependencies: eslint-visitor-keys: registry.npmmirror.com/eslint-visitor-keys/1.3.0 - lodash: registry.nlark.com/lodash/4.17.21 + lodash: registry.npmmirror.com/lodash/4.17.21 yaml: registry.npmmirror.com/yaml/1.10.2 dev: true diff --git a/src/App.vue b/src/App.vue index cb9b116..1f913d6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -45,13 +45,13 @@ onMounted(() => { }) const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'] -const options = ref( +const options = ref( Array.from({ length: 1000 }).map((_, idx) => ({ value: `Option ${idx + 1}`, label: `${initials[idx % 10]}${idx}` })) ) -const options2 = ref( +const options2 = ref( Array.from({ length: 10 }).map((_, idx) => { const label = idx + 1 return { @@ -65,7 +65,7 @@ const options2 = ref( }) ) -const options3: FormOptions[] = [ +const options3: ComponentOptions[] = [ { value: 'guide', label: 'Guide', @@ -332,6 +332,20 @@ function generateData() { return data } +const holidays = [ + '2021-10-01', + '2021-10-02', + '2021-10-03', + '2021-10-04', + '2021-10-05', + '2021-10-06', + '2021-10-07' +] + +function isHoliday({ dayjs }) { + return holidays.includes(dayjs.format('YYYY-MM-DD')) +} + const schema = reactive([ { field: 'field1', @@ -438,99 +452,107 @@ const schema = reactive([ field: 'field14', label: t('formDemo.default'), component: 'Select', - options: [ - { - label: '选项1', - value: '1' - }, - { - label: '选项2', - value: '2' - } - ] + componentProps: { + options: [ + { + label: 'option1', + value: '1' + }, + { + label: 'option2', + value: '2' + } + ] + } }, { field: 'field15', label: t('formDemo.slot'), component: 'Select', - options: [ - { - label: '选项1', - value: '1' - }, - { - label: '选项2', - value: '2' - } - ], - optionsSlot: true + componentProps: { + options: [ + { + label: 'option1', + value: '1' + }, + { + label: 'option2', + value: '2' + } + ], + optionsSlot: true + } }, { field: 'field16', - label: t('formDemo.group'), + label: t('formDemo.selectGroup'), component: 'Select', - options: [ - { - label: '选项1', - options: [ - { - label: '选项1-1', - value: '1-1' - }, - { - label: '选项1-2', - value: '1-2' - } - ] - }, - { - label: '选项2', - options: [ - { - label: '选项2-1', - value: '2-1' - }, - { - label: '选项2-2', - value: '2-2' - } - ] - } - ] + componentProps: { + options: [ + { + label: 'option1', + options: [ + { + label: 'option1-1', + value: '1-1' + }, + { + label: 'option1-2', + value: '1-2' + } + ] + }, + { + label: 'option2', + options: [ + { + label: 'option2-1', + value: '2-1' + }, + { + label: 'option2-2', + value: '2-2' + } + ] + } + ] + } }, { field: 'field17', - label: `${t('formDemo.group')}${t('formDemo.slot')}`, + label: `${t('formDemo.selectGroup')}${t('formDemo.slot')}`, component: 'Select', - options: [ - { - label: '选项1', - options: [ - { - label: '选项1-1', - value: '1-1' - }, - { - label: '选项1-2', - value: '1-2' - } - ] - }, - { - label: '选项2', - options: [ - { - label: '选项2-1', - value: '2-1' - }, - { - label: '选项2-2', - value: '2-2' - } - ] - } - ], - optionsSlot: true + componentProps: { + options: [ + { + label: 'option1', + options: [ + { + label: 'option1-1', + value: '1-1' + }, + { + label: 'option1-2', + value: '1-2' + } + ] + }, + { + label: 'option2', + options: [ + { + label: 'option2-1', + value: '2-1' + }, + { + label: 'option2-2', + value: '2-2' + } + ] + } + ], + optionsSlot: true + } }, { field: 'field18', @@ -541,14 +563,16 @@ const schema = reactive([ field: 'field19', label: t('formDemo.default'), component: 'SelectV2', - options: options.value + componentProps: { + options: options.value + } }, { field: 'field20', label: t('formDemo.slot'), component: 'SelectV2', - options: options.value, componentProps: { + options: options.value, slots: { default: true } @@ -556,16 +580,18 @@ const schema = reactive([ }, { field: 'field21', - label: t('formDemo.group'), + label: t('formDemo.selectGroup'), component: 'SelectV2', - options: options2.value + componentProps: { + options: options2.value + } }, { field: 'field22', - label: `${t('formDemo.group')}${t('formDemo.slot')}`, + label: `${t('formDemo.selectGroup')}${t('formDemo.slot')}`, component: 'SelectV2', - options: options2.value, componentProps: { + options: options2.value, slots: { default: true } @@ -580,14 +606,16 @@ const schema = reactive([ field: 'field24', label: t('formDemo.default'), component: 'Cascader', - options: options3 + componentProps: { + options: options3 + } }, { field: 'field25', label: t('formDemo.slot'), component: 'Cascader', - options: options3, componentProps: { + options: options3, slots: { default: true } @@ -710,15 +738,286 @@ const schema = reactive([ colProps: { xl: 12 } + }, + { + field: 'field38', + label: t('formDemo.radio'), + component: 'Divider' + }, + { + field: 'field39', + label: t('formDemo.default'), + component: 'Radio', + componentProps: { + options: [ + { + label: 'option-1', + value: '1' + }, + { + label: 'option-2', + value: '2' + } + ] + } + }, + { + field: 'field40', + label: t('formDemo.button'), + component: 'RadioButton', + componentProps: { + options: [ + { + label: 'option-1', + value: '1' + }, + { + label: 'option-2', + value: '2' + } + ] + } + }, + { + field: 'field41', + label: t('formDemo.checkbox'), + component: 'Divider' + }, + { + field: 'field42', + label: t('formDemo.default'), + component: 'Checkbox', + value: [], + componentProps: { + options: [ + { + label: 'option-1', + value: '1' + }, + { + label: 'option-2', + value: '2' + }, + { + label: 'option-3', + value: '23' + } + ] + } + }, + { + field: 'field43', + label: t('formDemo.button'), + component: 'CheckboxButton', + value: [], + componentProps: { + options: [ + { + label: 'option-1', + value: '1' + }, + { + label: 'option-2', + value: '2' + }, + { + label: 'option-3', + value: '23' + } + ] + } + }, + { + field: 'field44', + component: 'Divider', + label: t('formDemo.slider') + }, + { + field: 'field45', + component: 'Slider', + label: t('formDemo.default'), + value: 0 + }, + { + field: 'field46', + component: 'Divider', + label: t('formDemo.datePicker') + }, + { + field: 'field47', + component: 'DatePicker', + label: t('formDemo.default'), + componentProps: { + type: 'date' + } + }, + { + field: 'field48', + component: 'DatePicker', + label: t('formDemo.shortcuts'), + componentProps: { + type: 'date', + disabledDate: (time: Date) => { + return time.getTime() > Date.now() + }, + shortcuts: [ + { + text: t('formDemo.today'), + value: new Date() + }, + { + text: t('formDemo.yesterday'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24) + return date + } + }, + { + text: t('formDemo.aWeekAgo'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) + return date + } + } + ] + } + }, + { + field: 'field49', + component: 'DatePicker', + label: t('formDemo.week'), + componentProps: { + type: 'week', + format: `[${t('formDemo.week')}] ww` + } + }, + { + field: 'field50', + component: 'DatePicker', + label: t('formDemo.year'), + componentProps: { + type: 'year' + } + }, + { + field: 'field51', + component: 'DatePicker', + label: t('formDemo.month'), + componentProps: { + type: 'month' + } + }, + { + field: 'field52', + component: 'DatePicker', + label: t('formDemo.dates'), + componentProps: { + type: 'dates' + } + }, + { + field: 'field53', + component: 'DatePicker', + label: t('formDemo.daterange'), + componentProps: { + type: 'daterange' + } + }, + { + field: 'field54', + component: 'DatePicker', + label: t('formDemo.monthrange'), + componentProps: { + type: 'monthrange' + } + }, + { + field: 'field55', + component: 'DatePicker', + label: t('formDemo.slot'), + componentProps: { + type: 'date', + format: 'YYYY/MM/DD', + valueFormat: 'YYYY-MM-DD', + slots: { + default: true + } + } + }, + { + field: 'field56', + component: 'Divider', + label: t('formDemo.dateTimePicker') + }, + { + field: 'field57', + component: 'DatePicker', + label: t('formDemo.default'), + componentProps: { + type: 'datetime' + } + }, + { + field: 'field58', + component: 'DatePicker', + label: t('formDemo.shortcuts'), + componentProps: { + type: 'datetime', + shortcuts: [ + { + text: t('formDemo.today'), + value: new Date() + }, + { + text: t('formDemo.yesterday'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24) + return date + } + }, + { + text: t('formDemo.aWeekAgo'), + value: () => { + const date = new Date() + date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) + return date + } + } + ] + } + }, + { + field: 'field59', + component: 'DatePicker', + label: t('formDemo.dateTimerange'), + componentProps: { + type: 'datetimerange' + } + }, + { + field: 'field60', + component: 'Divider', + label: t('formDemo.timePicker') + }, + { + field: 'field61', + component: 'TimePicker', + label: t('formDemo.default') + }, + { + field: 'field62', + component: 'Divider', + label: t('formDemo.timeSelect') + }, + { + field: 'field63', + component: 'TimeSelect', + label: t('formDemo.default') } ]) - -setTimeout(() => { - if (schema[2].componentProps) { - schema[2].componentProps.placeholder = 'test' - console.log(schema[2]) - } -}, 3000) + + diff --git a/src/components/Form/src/VForm.vue b/src/components/Form/src/VForm.vue index e3890cd..536c2b5 100644 --- a/src/components/Form/src/VForm.vue +++ b/src/components/Form/src/VForm.vue @@ -12,6 +12,8 @@ import { setModel } from './helper' import { useRenderSelect } from './components/useRenderSelect' +import { useRenderRadio } from './components/useRenderRadio' +import { useRenderChcekbox } from './components/useRenderChcekbox' export default defineComponent({ name: 'VForm', @@ -93,7 +95,11 @@ export default defineComponent({ const slotsMap: Recordable = { ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field) } - if (item?.component !== 'SelectV2' && item.options) { + if ( + item?.component !== 'SelectV2' && + item?.component !== 'Cascader' && + item?.componentProps?.options + ) { slotsMap.default = () => renderOptions(item) } return ( @@ -105,8 +111,9 @@ export default defineComponent({ vModel={formModel[item.field]} {...(autoSetPlaceholder && setTextPlaceholder(item))} {...setComponentProps(item)} - {...(notRenderOptions.includes(item?.component as string) && item.options - ? { options: item.options || [] } + {...(notRenderOptions.includes(item?.component as string) && + item?.componentProps?.options + ? { options: item?.componentProps?.options || [] } : {})} > {{ ...slotsMap }} @@ -123,6 +130,14 @@ export default defineComponent({ case 'Select': const { renderSelectOptions } = useRenderSelect(slots) return renderSelectOptions(item) + case 'Radio': + case 'RadioButton': + const { renderRadioOptions } = useRenderRadio() + return renderRadioOptions(item) + case 'Checkbox': + case 'CheckboxButton': + const { renderChcekboxOptions } = useRenderChcekbox() + return renderChcekboxOptions(item) default: break } @@ -142,7 +157,7 @@ export default defineComponent({ } return () => ( - + {{ // 如果需要自定义，就什么都不渲染，而是提供默认插槽 default: () => (isCustom ? getSlot(slots, 'default') : renderWrap()) diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index f271a8f..7836ec6 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -22,6 +22,7 @@ import { const componentMap: Recordable = { Radio: ElRadioGroup, Checkbox: ElCheckboxGroup, + CheckboxButton: ElCheckboxGroup, Input: ElInput, Autocomplete: ElAutocomplete, InputNumber: ElInputNumber, @@ -36,7 +37,8 @@ const componentMap: Recordable = { Transfer: ElTransfer, Divider: ElDivider, TimeSelect: ElTimeSelect, - SelectV2: ElSelectV2 + SelectV2: ElSelectV2, + RadioButton: ElRadioGroup } export { componentMap } diff --git a/src/components/Form/src/components/useRenderChcekbox.tsx b/src/components/Form/src/components/useRenderChcekbox.tsx new file mode 100644 index 0000000..ec17e78 --- /dev/null +++ b/src/components/Form/src/components/useRenderChcekbox.tsx @@ -0,0 +1,20 @@ +import { ElCheckbox, ElCheckboxButton } from 'element-plus' +import { defineComponent } from 'vue' + +export function useRenderChcekbox() { + function renderChcekboxOptions(item: VFormSchema) { + // 如果有别名，就取别名 + const labelAlias = item?.componentProps?.optionsAlias?.labelField + const valueAlias = item?.componentProps?.optionsAlias?.valueField + const Com = (item.component === 'Checkbox' ? ElCheckbox : ElCheckboxButton) as ReturnType< + typeof defineComponent + > + return item?.componentProps?.options?.map((option) => { + return {option[valueAlias || 'label']} + }) + } + + return { + renderChcekboxOptions + } +} diff --git a/src/components/Form/src/components/useRenderRadio.tsx b/src/components/Form/src/components/useRenderRadio.tsx new file mode 100644 index 0000000..4a1fc95 --- /dev/null +++ b/src/components/Form/src/components/useRenderRadio.tsx @@ -0,0 +1,20 @@ +import { ElRadio, ElRadioButton } from 'element-plus' +import { defineComponent } from 'vue' + +export function useRenderRadio() { + function renderRadioOptions(item: VFormSchema) { + // 如果有别名，就取别名 + const labelAlias = item?.componentProps?.optionsAlias?.labelField + const valueAlias = item?.componentProps?.optionsAlias?.valueField + const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType< + typeof defineComponent + > + return item?.componentProps?.options?.map((option) => { + return {option[valueAlias || 'label']} + }) + } + + return { + renderRadioOptions + } +} diff --git a/src/components/Form/src/components/useRenderSelect.tsx b/src/components/Form/src/components/useRenderSelect.tsx index 7306490..0312a29 100644 --- a/src/components/Form/src/components/useRenderSelect.tsx +++ b/src/components/Form/src/components/useRenderSelect.tsx @@ -6,11 +6,11 @@ export function useRenderSelect(slots: Slots) { // 渲染 select options function renderSelectOptions(item: VFormSchema) { // 如果有别名，就取别名 - const labelAlias = item.optionsField?.labelField - return item.options?.map((option) => { + const labelAlias = item?.componentProps?.optionsAlias?.labelField + return item?.componentProps?.options?.map((option) => { if (option?.options?.length) { return ( - + {() => { return option?.options?.map((v) => { return renderSelectOptionItem(item, v) @@ -25,19 +25,18 @@ export function useRenderSelect(slots: Slots) { } // 渲染 select option item - function renderSelectOptionItem(item: VFormSchema, option: FormOptions) { + function renderSelectOptionItem(item: VFormSchema, option: ComponentOptions) { // 如果有别名，就取别名 - const labelAlias = item.optionsField?.labelField - const valueAlias = item.optionsField?.valueField + const labelAlias = item?.componentProps?.optionsAlias?.labelField + const valueAlias = item?.componentProps?.optionsAlias?.valueField return ( - + {{ default: () => // option 插槽名规则，{field}-option - item.optionsSlot ? getSlot(slots, `${item.field}-option`, { item: option }) : undefined + item?.componentProps?.optionsSlot + ? getSlot(slots, `${item.field}-option`, { item: option }) + : undefined }} ) diff --git a/src/locales/en.ts b/src/locales/en.ts index 9895d3a..d9882ef 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -16,13 +16,32 @@ export default { position: 'Position', autocomplete: 'Autocomplete', select: 'Select', - group: 'Select Group', + selectGroup: 'Select Group', selectV2: 'SelectV2', cascader: 'Cascader', switch: 'Switch', rate: 'Rate', - colorPicker: 'ColorPicker', + colorPicker: 'Color Picker', transfer: 'Transfer', - render: 'Render' + render: 'Render', + radio: 'Radio', + button: 'Button', + checkbox: 'Checkbox', + slider: 'Slider', + datePicker: 'Date Picker', + shortcuts: 'Shortcuts', + today: 'Today', + yesterday: 'Yesterday', + aWeekAgo: 'A week ago', + week: 'Week', + year: 'Year', + month: 'Month', + dates: 'Dates', + daterange: 'Date Range', + monthrange: 'Month Range', + dateTimePicker: 'DateTimePicker', + dateTimerange: 'Datetime Range', + timePicker: 'Time Picker', + timeSelect: 'Time Select' } } diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 56f9353..8b8e67d 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -16,13 +16,32 @@ export default { position: '位置', autocomplete: '自动补全', select: '选择器', - group: '选项分组', + selectGroup: '选项分组', selectV2: '虚拟列表选择器', cascader: '级联选择器', switch: '开关', rate: '评分', colorPicker: '颜色选择器', transfer: '穿梭框', - render: '渲染器' + render: '渲染器', + radio: '单选框', + button: '按钮', + checkbox: '多选框', + slider: '滑块', + datePicker: '日期选择器', + shortcuts: '快捷选项', + today: '今天', + yesterday: '昨天', + aWeekAgo: '一周前', + week: '周', + year: '年', + month: '月', + dates: '日期', + daterange: '日期范围', + monthrange: '月份范围', + dateTimePicker: '日期时间选择器', + dateTimerange: '日期时间范围', + timePicker: '时间选择器', + timeSelect: '时间选择' } } diff --git a/src/styles/variable.less b/src/styles/variables.less similarity index 100% rename from src/styles/variable.less rename to src/styles/variables.less diff --git a/src/types/componentType.d.ts b/src/types/componentType.d.ts index fcabe50..be262a1 100644 --- a/src/types/componentType.d.ts +++ b/src/types/componentType.d.ts @@ -5,7 +5,9 @@ declare global { // BfForm types start declare type ComponentName = | 'Radio' + | 'RadioButton' | 'Checkbox' + | 'CheckboxButton' | 'Input' | 'Autocomplete' | 'InputNumber' @@ -52,21 +54,26 @@ declare global { style?: CSSProperties } - declare type FormOptions = { + declare type ComponentOptions = { label?: string value?: FormValueTypes disabled?: boolean key?: string | number - children?: FormOptions[] - options?: FormOptions[] - [key: string]: any - } + children?: ComponentOptions[] + options?: ComponentOptions[] + } & Recordable - declare type FormOptionsAlias = { + declare type ComponentOptionsAlias = { labelField?: string valueField?: string } + declare type ComponentProps = { + optionsAlias?: ComponentOptionsAlias + options?: ComponentOptions[] + optionsSlot?: boolean + } & Recordable + declare type VFormSchema = { // 唯一值 field: string @@ -75,23 +82,15 @@ declare global { // col组件属性 colProps?: ColProps // 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档 - componentProps?: { slots?: Recordable } & Recordable + componentProps?: { slots?: Recordable } & ComponentProps // formItem组件属性 formItemProps?: FormItemProps // 渲染的组件 component?: ComponentName // 初始值 value?: FormValueTypes - // 下拉选项 - options?: FormOptions[] - // 下拉选项别名 - optionsField?: FormOptionsAlias - // 下拉选项插槽，规则：${field}-option - optionsSlot?: boolean // 是否隐藏 hidden?: boolean - // 表单组件插槽，规则：${field} - slot?: boolean } // VForm types end