diff --git a/packages/components/src/__builtins__/shared/index.ts b/packages/components/src/__builtins__/shared/index.ts index 25aee28..f1e27e1 100644 --- a/packages/components/src/__builtins__/shared/index.ts +++ b/packages/components/src/__builtins__/shared/index.ts @@ -5,3 +5,4 @@ export * from './utils' export * from './portal' export * from './loading' export * from './types' +export * from './style' diff --git a/packages/components/src/__builtins__/shared/style.ts b/packages/components/src/__builtins__/shared/style.ts new file mode 100644 index 0000000..093807a --- /dev/null +++ b/packages/components/src/__builtins__/shared/style.ts @@ -0,0 +1,8 @@ +export function getStyleNumber(value: string | number) { + const num = Number(value) + if (isNaN(num)) { + return value + } else { + return `${value}px` + } +} diff --git a/packages/components/src/__builtins__/shared/utils.ts b/packages/components/src/__builtins__/shared/utils.ts index e987034..2cc0563 100644 --- a/packages/components/src/__builtins__/shared/utils.ts +++ b/packages/components/src/__builtins__/shared/utils.ts @@ -19,7 +19,7 @@ export function isVnode(element: any): boolean { ) } -export function isVueOptions(options) { +export function isVueOptions(options: any) { return ( options && (typeof options.template === 'string' || diff --git a/packages/components/src/form-item/index.ts b/packages/components/src/form-item/index.ts index 90eeefc..ebebda5 100644 --- a/packages/components/src/form-item/index.ts +++ b/packages/components/src/form-item/index.ts @@ -17,7 +17,12 @@ import { Warning, } from '@element-plus/icons-vue' import { useFormLayout, FormLayoutShallowContext } from '../form-layout' -import { composeExport, resolveComponent, stylePrefix } from '../__builtins__' +import { + composeExport, + resolveComponent, + stylePrefix, + getStyleNumber, +} from '../__builtins__' import { Component } from 'vue' import { ElTooltip, ElIcon } from 'element-plus' import ResizeObserver from 'resize-observer-polyfill' @@ -200,12 +205,16 @@ export const FormBaseItem = defineComponent({ let enableCol = false if (labelWidth || wrapperWidth) { if (labelWidth) { - labelStyle.width = `${labelWidth}px` - labelStyle.maxWidth = `${labelWidth}px` + labelStyle.width = + labelWidth === 'auto' ? undefined : getStyleNumber(labelWidth) + labelStyle.maxWidth = + labelWidth === 'auto' ? undefined : getStyleNumber(labelWidth) } if (wrapperWidth) { - wrapperStyle.width = `${wrapperWidth}px` - wrapperStyle.maxWidth = `${wrapperWidth}px` + wrapperStyle.width = + wrapperWidth === 'auto' ? undefined : getStyleNumber(wrapperWidth) + wrapperStyle.maxWidth = + wrapperWidth === 'auto' ? undefined : getStyleNumber(wrapperWidth) } // 栅格模式 } else if (labelCol || wrapperCol) {