vxe-pc-ui 4.1.20 → 4.1.21

package/packages/carousel/src/carousel.ts

@@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
 
-import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types'
+import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselInternalData, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCarousel',
@@ -61,6 +61,11 @@ export default defineComponent({
       itemHeight: 0
     })
 
+    const internalData: CarouselInternalData = {
+      apTimeout: undefined,
+      stopFlag: false
+    }
+
     const refMaps: CarouselPrivateRef = {
       refElem
     }
@@ -88,6 +93,7 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
 
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
@@ -198,22 +204,22 @@ export default defineComponent({
       }
     }
 
-    let apTimeout: any = null
-    let stopFlag = false
-
     const stopAutoPlay = () => {
-      stopFlag = true
-      if (apTimeout !== null) {
+      const { apTimeout } = internalData
+      internalData.stopFlag = true
+      if (apTimeout) {
         clearTimeout(apTimeout)
+        internalData.apTimeout = undefined
       }
     }
 
     const handleAutoPlay = () => {
       const { autoPlay, interval } = props
+      const { stopFlag } = internalData
       stopAutoPlay()
       if (autoPlay) {
-        stopFlag = false
-        apTimeout = setTimeout(() => {
+        internalData.stopFlag = false
+        internalData.apTimeout = setTimeout(() => {
           if (!stopFlag) {
             handlePrevNext(true)
           }
@@ -324,7 +330,9 @@ export default defineComponent({
                 height: toCssUnit(height)
               }
             : null
-        }, renderItemWrapper(list)),
+        }, [
+          renderItemWrapper(list)
+        ]),
         showIndicators ? renderIndicators(list) : createCommentVNode(),
         h('div', {
           class: 'vxe-carousel--btn-wrapper'
@@ -356,8 +364,6 @@ export default defineComponent({
       ])
     }
 
-    $xeCarousel.renderVN = renderVN
-
     const optsFlag = ref(0)
     watch(() => props.options ? props.options.length : -1, () => {
       optsFlag.value++
@@ -397,6 +403,8 @@ export default defineComponent({
 
     provide('$xeCarousel', $xeCarousel)
 
+    $xeCarousel.renderVN = renderVN
+
     return $xeCarousel
   },
   render () {

package/packages/checkbox/src/checkbox.ts

@@ -1,25 +1,37 @@
-import { defineComponent, h, computed, inject, PropType } from 'vue'
+import { defineComponent, h, computed, inject, PropType, reactive } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText } from '../../ui/src/utils'
 import { getConfig, createEvent, useSize, getIcon } from '../../ui'
 
-import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, VxeCheckboxEmits, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, CheckboxReactData, VxeCheckboxEmits, ValueOf, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCheckbox',
   props: {
     modelValue: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.ModelValue>,
-    label: { type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>, default: null },
+    label: {
+      type: [String, Number] as PropType<VxeCheckboxPropTypes.Label>,
+      default: null
+    },
     indeterminate: Boolean as PropType<VxeCheckboxPropTypes.Indeterminate>,
     title: [String, Number] as PropType<VxeCheckboxPropTypes.Title>,
-    checkedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>, default: true },
-    uncheckedValue: { type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>, default: false },
+    checkedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.CheckedValue>,
+      default: true
+    },
+    uncheckedValue: {
+      type: [String, Number, Boolean] as PropType<VxeCheckboxPropTypes.UncheckedValue>,
+      default: false
+    },
     content: [String, Number] as PropType<VxeCheckboxPropTypes.Content>,
     disabled: {
       type: Boolean as PropType<VxeCheckboxPropTypes.Disabled>,
       default: null
     },
-    size: { type: String as PropType<VxeCheckboxPropTypes.Size>, default: () => getConfig().checkbox.size || getConfig().size }
+    size: {
+      type: String as PropType<VxeCheckboxPropTypes.Size>,
+      default: () => getConfig().checkbox.size || getConfig().size
+    }
   },
   emits: [
     'update:modelValue',
@@ -34,10 +46,14 @@ export default defineComponent({
 
     const xID = XEUtils.uniqueId()
 
+    const reactData: CheckboxReactData = reactive({
+    })
+
     const $xeCheckbox = {
       xID,
       props,
-      context
+      context,
+      reactData
     } as unknown as VxeCheckboxConstructor
 
     let checkboxMethods = {} as CheckboxMethods
@@ -53,12 +69,13 @@ export default defineComponent({
 
     const computeIsDisabled = computed(() => {
       const { disabled } = props
+      const isChecked = computeIsChecked.value
       if (disabled === null) {
         if ($xeCheckboxGroup) {
-          const { computeIsDisabled, computeIsMaximize } = $xeCheckboxGroup.getComputeMaps()
-          const isMaximize = computeIsMaximize.value
-          const isChecked = computeIsChecked.value
-          return computeIsDisabled.value || (isMaximize && !isChecked)
+          const { computeIsDisabled: computeIsGroupDisabled, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps()
+          const isGroupDisabled = computeIsGroupDisabled.value
+          const isGroupMaximize = computeIsGroupMaximize.value
+          return isGroupDisabled || (isGroupMaximize && !isChecked)
         }
       }
       return disabled
@@ -84,10 +101,12 @@ export default defineComponent({
       }
     }
 
+    const dispatchEvent = (type: ValueOf<VxeCheckboxEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
+    }
+
     checkboxMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params))
-      }
+      dispatchEvent
     }
 
     Object.assign($xeCheckbox, checkboxMethods)
@@ -96,7 +115,7 @@ export default defineComponent({
       const vSize = computeSize.value
       const isDisabled = computeIsDisabled.value
       const isChecked = computeIsChecked.value
-      const indeterminate = props.indeterminate
+      const indeterminate = !isChecked && props.indeterminate
       return h('label', {
         class: ['vxe-checkbox', {
           [`size--${vSize}`]: vSize,

package/packages/checkbox/src/group.ts

@@ -1,9 +1,9 @@
-import { defineComponent, h, provide, PropType, computed, inject } from 'vue'
+import { defineComponent, h, provide, PropType, computed, inject, reactive } from 'vue'
 import { getConfig, createEvent, useSize } from '../../ui'
 import XEUtils from 'xe-utils'
 import VxeCheckboxComponent from './checkbox'
 
-import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, ValueOf, CheckboxGroupReactData, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCheckboxGroup',
@@ -15,8 +15,14 @@ export default defineComponent({
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
       default: null
     },
-    max: { type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>, default: null },
-    size: { type: String as PropType<VxeCheckboxGroupPropTypes.Size>, default: () => getConfig().checkboxGroup.size || getConfig().size }
+    max: {
+      type: [String, Number] as PropType<VxeCheckboxGroupPropTypes.Max>,
+      default: null
+    },
+    size: {
+      type: String as PropType<VxeCheckboxGroupPropTypes.Size>,
+      default: () => getConfig().checkboxGroup.size || getConfig().size
+    }
   },
   emits: [
     'update:modelValue',
@@ -29,6 +35,9 @@ export default defineComponent({
 
     const xID = XEUtils.uniqueId()
 
+    const reactData: CheckboxGroupReactData = reactive({
+    })
+
     const computeIsDisabled = computed(() => {
       const { disabled } = props
       if (disabled === null) {
@@ -49,7 +58,7 @@ export default defineComponent({
     })
 
     const computePropsOpts = computed(() => {
-      return props.optionProps || {}
+      return Object.assign({}, props.optionProps)
     })
 
     const computeLabelField = computed(() => {
@@ -76,16 +85,19 @@ export default defineComponent({
       xID,
       props,
       context,
+      reactData,
 
       getComputeMaps: () => computeMaps
     } as unknown as VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods
 
     useSize(props)
 
+    const dispatchEvent = (type: ValueOf<VxeCheckboxGroupEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
+    }
+
     const checkboxGroupMethods: CheckboxGroupMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params))
-      }
+      dispatchEvent
     }
 
     const checkboxGroupPrivateMethods: CheckboxGroupPrivateMethods = {
@@ -132,10 +144,10 @@ export default defineComponent({
             : []))
     }
 
-    $xeCheckboxGroup.renderVN = renderVN
-
     provide('$xeCheckboxGroup', $xeCheckboxGroup)
 
+    $xeCheckboxGroup.renderVN = renderVN
+
     return renderVN
   }
 })

package/packages/collapse-pane/index.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
-import VxeCollapsePaneComponent from './src/collapse-pane'
+import VxeCollapsePaneComponent from '../collapse/src/collapse-pane'
 import { dynamicApp } from '../dynamics'
 
 export const VxeCollapsePane = Object.assign({}, VxeCollapsePaneComponent, {

package/packages/countdown/src/countdown.ts

@@ -234,8 +234,6 @@ export default defineComponent({
       ])
     }
 
-    $xeCountdown.renderVN = renderVN
-
     watch(() => props.modelValue, () => {
       updateCount()
       handleStop()
@@ -252,6 +250,8 @@ export default defineComponent({
 
     updateCount()
 
+    $xeCountdown.renderVN = renderVN
+
     return $xeCountdown
   },
   render () {

package/packages/date-picker/src/date-picker.ts

@@ -636,7 +636,7 @@ export default defineComponent({
       datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
-    const emitModel = (value: string, evnt: Event | { type: string }) => {
+    const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
@@ -656,7 +656,7 @@ export default defineComponent({
       reactData.inputValue = value
       if (!isDatePickerType) {
         if (inpImmediate) {
-          emitModel(value, evnt)
+          handleChange(value, evnt)
         } else {
           datePickerMethods.dispatchEvent('input', { value }, evnt)
         }
@@ -702,7 +702,7 @@ export default defineComponent({
       if (isDatePickerType) {
         hidePanel()
       }
-      emitModel('', evnt)
+      handleChange('', evnt)
       datePickerMethods.dispatchEvent('clear', { value }, evnt)
     }
 
@@ -820,19 +820,19 @@ export default defineComponent({
               datetimeRest.push(item)
             }
           })
-          emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+          handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-            emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
           } else {
-            emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+            handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
           }
         }
       } else {
         // 如果为单选
         if (!XEUtils.isEqual(modelValue, inpVal)) {
-          emitModel(inpVal, { type: 'update' })
+          handleChange(inpVal, { type: 'update' })
         }
       }
     }
@@ -849,7 +849,7 @@ export default defineComponent({
             if (type === 'time') {
               inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat)
               if (inputValue !== inpDateVal) {
-                emitModel(inpDateVal, { type: 'check' })
+                handleChange(inpDateVal, { type: 'check' })
               }
               reactData.inputValue = inpDateVal
             } else {
@@ -877,7 +877,7 @@ export default defineComponent({
             dateRevert()
           }
         } else {
-          emitModel('', { type: 'check' })
+          handleChange('', { type: 'check' })
         }
       }
     }
@@ -886,7 +886,7 @@ export default defineComponent({
       const { inputValue } = reactData
       const inpImmediate = computeInpImmediate.value
       if (!inpImmediate) {
-        emitModel(inputValue, evnt)
+        handleChange(inputValue, evnt)
       }
       afterCheckValue()
       if (!reactData.visiblePanel) {
@@ -1155,10 +1155,10 @@ export default defineComponent({
                 datetimeRest.push(item)
               }
             })
-            emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+            handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
           } else {
             // 如果是日期类型
-            emitModel(dateMultipleValue.join(','), { type: 'update' })
+            handleChange(dateMultipleValue.join(','), { type: 'update' })
           }
         } else {
           dateChange(dateValue || reactData.currentDate)

package/packages/drawer/src/drawer.ts

@@ -465,8 +465,6 @@ export default defineComponent({
       ])
     }
 
-    $xeDrawer.renderVN = renderVN
-
     watch(() => props.width, recalculate)
     watch(() => props.height, recalculate)
 
@@ -496,6 +494,8 @@ export default defineComponent({
 
     provide('$xeDrawer', '$xeDrawer')
 
+    $xeDrawer.renderVN = renderVN
+
     return $xeDrawer
   },
   render () {

package/packages/form/render/index.ts

@@ -8,8 +8,6 @@ import type { VxeButtonComponent } from '../../../types/all'
 
 const componentDefaultModelProp = 'modelValue'
 
-const defaultCompProps = { transfer: true }
-
 /**
  * 已废弃
  * @deprecated
@@ -39,7 +37,7 @@ function getNativeAttrs (renderOpts: any) {
 }
 
 function getComponentFormItemProps (renderOpts: any, params: any, value: any, defaultProps?: any) {
-  return XEUtils.assign({}, defaultCompProps, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value })
+  return XEUtils.assign({}, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value })
 }
 
 /**

package/packages/form/src/form-config-item.ts

@@ -19,11 +19,12 @@ const VxeFormConfigItem = defineComponent({
     provide('xeFormItemInfo', xeformiteminfo)
 
     const renderVN = () => {
-      const { reactData } = $xeForm
-      const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = $xeForm.props
+      const formProps = $xeForm.props
+      const formReactData = $xeForm.reactData
+      const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps
       const { computeValidOpts } = $xeForm.getComputeMaps()
       const item = props.itemConfig as VxeFormDefines.ItemInfo
-      const { collapseAll } = reactData
+      const { collapseAll } = formReactData
       const validOpts = computeValidOpts.value
       const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
       const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null

package/packages/form/src/form-gather.ts

@@ -11,7 +11,7 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const parentFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
+    const $xeParentFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
     const formItem = reactive(createItem($xeForm, props))
     formItem.children = []
 
@@ -21,7 +21,8 @@ export default defineComponent({
     watchItem(props, formItem)
 
     onMounted(() => {
-      assembleItem($xeForm, refElem.value, formItem, parentFormGather)
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeParentFormGather)
     })
 
     onUnmounted(() => {
@@ -32,9 +33,10 @@ export default defineComponent({
       const { className, field } = props
       const span = props.span || ($xeForm ? $xeForm.props.span : null)
       const defaultSlot = slots.default
+      const params = { $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string }
       return h('div', {
         ref: refElem,
-        class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className({ $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string }) : className) : '']
+        class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
       }, defaultSlot ? defaultSlot({}) : [])
     }
 

package/packages/form/src/form-item.ts

@@ -58,7 +58,10 @@ export const formItemProps = {
   titleSuffix: Object as PropType<VxeFormItemPropTypes.TitleSuffix>,
   resetValue: { default: null },
   visibleMethod: Function as PropType<VxeFormItemPropTypes.VisibleMethod>,
-  visible: { type: Boolean as PropType<VxeFormItemPropTypes.Visible>, default: null },
+  visible: {
+    type: Boolean as PropType<VxeFormItemPropTypes.Visible>,
+    default: null
+  },
   folding: Boolean as PropType<VxeFormItemPropTypes.Folding>,
   collapseNode: Boolean as PropType<VxeFormItemPropTypes.CollapseNode>,
   itemRender: Object as PropType<VxeFormItemPropTypes.ItemRender>,
@@ -71,7 +74,7 @@ export default defineComponent({
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
     const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods)
-    const formGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
+    const $xeFormGather = inject<XEFormItemProvide | null>('$xeFormGather', null)
     const formItem = reactive(createItem($xeForm, props))
     formItem.slots = slots
 
@@ -81,7 +84,8 @@ export default defineComponent({
     watchItem(props, formItem)
 
     onMounted(() => {
-      assembleItem($xeForm, refElem.value, formItem, formGather)
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeFormGather)
     })
 
     onUnmounted(() => {
@@ -89,9 +93,10 @@ export default defineComponent({
     })
 
     const renderItem = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => {
-      const { props, reactData } = $xeForm
-      const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = props
-      const { collapseAll } = reactData
+      const formProps = $xeForm.props
+      const formReactData = $xeForm.reactData
+      const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps
+      const { collapseAll } = formReactData
       const { computeValidOpts } = $xeForm.getComputeMaps()
       const validOpts = computeValidOpts.value
       const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item
@@ -104,8 +109,8 @@ export default defineComponent({
       const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null
       const defaultSlot = slots ? slots.default : null
       const titleSlot = slots ? slots.title : null
-      const span = item.span || props.span
-      const align = item.align || props.align
+      const span = item.span || formProps.span
+      const align = item.align || formProps.align
       const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding
       const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical
       const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold
@@ -243,8 +248,8 @@ export default defineComponent({
     }
 
     const renderVN = () => {
-      const formProps = $xeForm ? $xeForm.props : null
-      return formProps && formProps.customLayout
+      const customLayout = $xeForm ? $xeForm.props.customLayout : false
+      return customLayout
         ? renderItem($xeForm, formItem as unknown as VxeFormDefines.ItemInfo)
         : h('div', {
           ref: refElem

package/packages/form/src/form.ts

@@ -71,7 +71,10 @@ function getResetValue (value: any, resetValue: any) {
 export default defineComponent({
   name: 'VxeForm',
   props: {
-    collapseStatus: { type: Boolean as PropType<VxeFormPropTypes.CollapseStatus>, default: true },
+    collapseStatus: {
+      type: Boolean as PropType<VxeFormPropTypes.CollapseStatus>,
+      default: true
+    },
     loading: Boolean as PropType<VxeFormPropTypes.Loading>,
     data: Object as PropType<VxeFormPropTypes.Data>,
     size: {
@@ -156,7 +159,8 @@ export default defineComponent({
     })
 
     const internalData = reactive<FormInternalData>({
-      tooltipTimeout: null,
+      meTimeout: undefined,
+      stTimeout: undefined,
       tooltipStore: {
         item: null,
         visible: false
@@ -455,15 +459,13 @@ export default defineComponent({
       })
     }
 
-    let showErrTime: number
-
     const beginValidate = (itemList: VxeFormDefines.ItemInfo[], type?: string, callback?: any): Promise<any> => {
       const { data, rules: formRules } = props
       const validOpts = computeValidOpts.value
       const validRest: any = {}
       const validFields: string[] = []
       const itemValids: any[] = []
-      clearTimeout(showErrTime)
+      clearTimeout(internalData.meTimeout)
       if (data && formRules) {
         itemList.forEach((item) => {
           const { field } = item
@@ -490,7 +492,7 @@ export default defineComponent({
           }
         }).catch(() => {
           return new Promise<void>((resolve) => {
-            showErrTime = window.setTimeout(() => {
+            internalData.meTimeout = window.setTimeout(() => {
               itemList.forEach((item) => {
                 if (item.errRule) {
                   item.showError = true
@@ -585,7 +587,7 @@ export default defineComponent({
       const overflowElem = (evnt.currentTarget as HTMLDivElement).children[0]
       const content = (overflowElem.textContent || '').trim()
       const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
-      clearTimeout(internalData.tooltipTimeout)
+      clearTimeout(internalData.stTimeout)
       if (tooltipStore.item !== item) {
         closeTooltip()
       }
@@ -607,7 +609,7 @@ export default defineComponent({
         $tooltip.setActived(false)
       }
       if (tooltipOpts.enterable) {
-        internalData.tooltipTimeout = setTimeout(() => {
+        internalData.stTimeout = setTimeout(() => {
           $tooltip = refTooltip.value
           if ($tooltip && !$tooltip.isActived()) {
             closeTooltip()
@@ -719,8 +721,6 @@ export default defineComponent({
       ])
     }
 
-    $xeForm.renderVN = renderVN
-
     const staticItemFlag = ref(0)
     watch(() => reactData.staticItems.length, () => {
       staticItemFlag.value++
@@ -773,6 +773,8 @@ export default defineComponent({
     provide('$xeFormGather', null)
     provide('$xeFormItem', null)
 
+    $xeForm.renderVN = renderVN
+
     return $xeForm
   },
   render () {

package/packages/form/src/render.ts

@@ -30,7 +30,8 @@ function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
 }
 
 export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
-  const { data, readonly, disabled } = $xeForm.props
+  const formProps = $xeForm.props
+  const { data, readonly, disabled } = formProps
   const { computeTooltipOpts } = $xeForm.getComputeMaps()
   const { slots, field, itemRender, titlePrefix, titleSuffix } = item
   const tooltipOpts = computeTooltipOpts.value

package/packages/form/src/util.ts

@@ -45,7 +45,8 @@ export function isActiveItem ($xeForm: VxeFormConstructor, formItem: VxeFormDefi
   if (!visibleMethod) {
     return true
   }
-  const { data } = $xeForm.props
+  const formProps = $xeForm.props
+  const { data } = formProps
   return visibleMethod({ data, field, property: field, item: formItem, $form: $xeForm, $grid: $xeForm.xegrid })
 }