| 提交 | 用户 | age | ||
| 2f6253 | 1 | import type { Ref } from 'vue'; |
| 陈 | 2 | import type { FormProps, FormSchema } from '../types/form'; |
| 3 | ||
| 4 | import { computed, unref } from 'vue'; | |
| 5 | import { isNumber } from '/@/utils/is'; | |
| 6 | ||
| 7 | export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) { | |
| 4ff1c4 | 8 | return computed(() => { |
| 2f6253 | 9 | const schemaItem = unref(schemaItemRef); |
| 陈 | 10 | const { labelCol = {}, wrapperCol = {} } = schemaItem.itemProps || {}; |
| 11 | const { labelWidth, disabledLabelWidth } = schemaItem; | |
| 12 | ||
| 0b6110 | 13 | const { |
| V | 14 | labelWidth: globalLabelWidth, |
| 15 | labelCol: globalLabelCol, | |
| 16 | wrapperCol: globWrapperCol, | |
| 4ff1c4 | 17 | } = unref(propsRef); |
| 0b6110 | 18 | |
| ba068b | 19 | // If labelWidth is set globally, all items setting |
| 0b6110 | 20 | if ((!globalLabelWidth && !labelWidth && !globalLabelCol) || disabledLabelWidth) { |
| 2f6253 | 21 | return { labelCol, wrapperCol }; |
| 陈 | 22 | } |
| 23 | let width = labelWidth || globalLabelWidth; | |
| 0b6110 | 24 | const col = { ...globalLabelCol, ...labelCol }; |
| V | 25 | const wrapCol = { ...globWrapperCol, ...wrapperCol }; |
| 2f6253 | 26 | |
| 陈 | 27 | if (width) { |
| 28 | width = isNumber(width) ? `${width}px` : width; | |
| 29 | } | |
| 30 | return { | |
| 0b6110 | 31 | labelCol: { style: { width }, ...col }, |
| V | 32 | wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol }, |
| 2f6253 | 33 | }; |
| 陈 | 34 | }); |
| 35 | } | |
