fix: fix form-item labelWidth and wrapperWidth error

formilyjs · Jul 5, 2022 · 6e74041 · 6e74041
1 parent 38d7afd
commit 6e74041
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {