vxe-table 4.1.20 → 4.2.0-beta.2

package/packages/form/src/form.ts

@@ -1,10 +1,11 @@
-import { defineComponent, h, ref, Ref, resolveComponent, ComponentOptions, ComputedRef, createCommentVNode, provide, computed, reactive, watch, nextTick, PropType, VNode, onMounted } from 'vue'
+import { defineComponent, h, ref, Ref, resolveComponent, ComponentOptions, createCommentVNode, provide, computed, reactive, watch, nextTick, PropType, VNode, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
-import { errLog, getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
+import { getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
+import { errLog } from '../../tools/log'
 import { scrollToView } from '../../tools/dom'
-import { createItem } from './util'
+import { createItem, handleFieldOrItem } from './util'
 import { renderTitle } from './render'
 import { useSize } from '../../hooks/size'
 
@@ -113,7 +114,6 @@ export default defineComponent({
 
     const internalData = reactive<FormInternalData>({
       tooltipTimeout: null,
-      tooltipActive: false,
       tooltipStore: {
         item: null,
         visible: false
@@ -129,24 +129,8 @@ export default defineComponent({
       return Object.assign({}, GlobalConfig.form.validConfig, props.validConfig)
     })
 
-    let computeTooltipOpts = ref() as ComputedRef<VxeFormPropTypes.TooltipOpts>
-
-    const handleTooltipLeaveMethod = () => {
-      const tooltipOpts = computeTooltipOpts.value
-      setTimeout(() => {
-        if (!internalData.tooltipActive) {
-          formMethods.closeTooltip()
-        }
-      }, tooltipOpts.leaveDelay)
-      return false
-    }
-
-    computeTooltipOpts = computed(() => {
-      const opts: VxeFormPropTypes.TooltipOpts = Object.assign({ leaveDelay: 300 }, GlobalConfig.form.tooltipConfig, props.tooltipConfig)
-      if (opts.enterable) {
-        opts.leaveMethod = handleTooltipLeaveMethod
-      }
-      return opts
+    const computeTooltipOpts = computed(() => {
+      return Object.assign({}, GlobalConfig.tooltip, GlobalConfig.form.tooltipConfig, props.tooltipConfig)
     })
 
     const refMaps: FormPrivateRef = {
@@ -208,6 +192,11 @@ export default defineComponent({
       return itemList
     }
 
+    const getItemByField = (field: string) => {
+      const rest = XEUtils.findTree(reactData.formItems, item => item.field === field, { children: 'children' })
+      return rest ? rest.item : null
+    }
+
     const getCollapseStatus = () => {
       return reactData.collapseAll
     }
@@ -226,15 +215,14 @@ export default defineComponent({
       formMethods.dispatchEvent('collapse', { status, collapse: status, data: props.data }, evnt)
     }
 
-    const clearValidate = (field?: string) => {
-      const itemList = getItems()
-      if (field) {
-        const item = itemList.find((item) => item.field === field)
+    const clearValidate = (fieldOrItem?: VxeFormItemPropTypes.Field | VxeFormDefines.ItemInfo) => {
+      if (fieldOrItem) {
+        const item = handleFieldOrItem($xeform, fieldOrItem)
         if (item) {
           item.showError = false
         }
       } else {
-        itemList.forEach((item) => {
+        getItems().forEach((item) => {
           item.showError = false
         })
       }
@@ -267,10 +255,9 @@ export default defineComponent({
     }
 
     const handleFocus = (fields: string[]) => {
-      const itemList = getItems()
       const el = refElem.value
       fields.some((property, index) => {
-        const item = itemList.find((item) => item.field === property)
+        const item = getItemByField(property)
         if (item && isEnableConf(item.itemRender)) {
           const { itemRender } = item
           const compConf = VXETable.renderer.get(itemRender.name)
@@ -428,8 +415,9 @@ export default defineComponent({
       return beginValidate(getItems(), '', callback)
     }
 
-    const validateField = (field: VxeFormItemPropTypes.Field, callback: any) => {
-      return beginValidate(getItems().filter(item => item.field === field), '', callback)
+    const validateField = (fieldOrItem: VxeFormItemPropTypes.Field | VxeFormDefines.ItemInfo, callback: any) => {
+      const item = handleFieldOrItem($xeform, fieldOrItem)
+      return beginValidate(item ? [item] : [], '', callback)
     }
 
     const submitEvent = (evnt: Event) => {
@@ -459,7 +447,7 @@ export default defineComponent({
       return nextTick()
     }
 
-    const triggerHeaderHelpEvent = (evnt: MouseEvent, params: {
+    const triggerTitleTipEvent = (evnt: MouseEvent, params: {
       item: VxeFormDefines.ItemInfo;
     }) => {
       const { item } = params
@@ -469,8 +457,9 @@ export default defineComponent({
       const content = (overflowElem.textContent || '').trim()
       const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
       clearTimeout(internalData.tooltipTimeout)
-      internalData.tooltipActive = true
-      closeTooltip()
+      if (tooltipStore.item !== item) {
+        closeTooltip()
+      }
       if (content && isCellOverflow) {
         Object.assign(tooltipStore, {
           item,
@@ -482,13 +471,16 @@ export default defineComponent({
       }
     }
 
-    const handleTargetLeaveEvent = () => {
+    const handleTitleTipLeaveEvent = () => {
       const tooltipOpts = computeTooltipOpts.value
-      internalData.tooltipActive = false
+      let $tooltip = refTooltip.value
+      if ($tooltip) {
+        $tooltip.setActived(false)
+      }
       if (tooltipOpts.enterable) {
         internalData.tooltipTimeout = setTimeout(() => {
-          const $tooltip = refTooltip.value
-          if ($tooltip && !$tooltip.reactData.isHover) {
+          $tooltip = refTooltip.value
+          if ($tooltip && !$tooltip.isActived()) {
             closeTooltip()
           }
         }, tooltipOpts.leaveDelay)
@@ -510,8 +502,7 @@ export default defineComponent({
             clearValidate(property)
           })
           .catch(({ rule }) => {
-            const itemList = getItems()
-            const item = itemList.find((item) => item.field === property)
+            const item = getItemByField(property)
             if (item) {
               item.showError = true
               item.errRule = rule
@@ -524,7 +515,7 @@ export default defineComponent({
       const { data, rules, titleOverflow: allTitleOverflow } = props
       const { collapseAll } = reactData
       const validOpts = computeValidOpts.value
-      return itemList.map((item, index) => {
+      return itemList.map((item) => {
         const { slots, title, visible, folding, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, children } = item
         const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
         const defaultSlot = slots ? slots.default : null
@@ -596,9 +587,9 @@ export default defineComponent({
         }
         const ons = showTooltip ? {
           onMouseenter (evnt: MouseEvent) {
-            triggerHeaderHelpEvent(evnt, params)
+            triggerTitleTipEvent(evnt, params)
           },
-          onMouseleave: handleTargetLeaveEvent
+          onMouseleave: handleTitleTipLeaveEvent
         } : {}
         return h('div', {
           class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
@@ -608,7 +599,7 @@ export default defineComponent({
             'is--active': !itemVisibleMethod || itemVisibleMethod(params),
             'is--error': showError
           }],
-          key: index
+          key: item.id
         }, [
           h('div', {
             class: 'vxe-form--item-inner'
@@ -642,14 +633,15 @@ export default defineComponent({
       updateStatus,
       toggleCollapse,
       getItems,
+      getItemByField,
       closeTooltip
     }
 
     const formPrivateMethods: VxeFormPrivateMethods = {
       callSlot,
       toggleCollapseEvent,
-      triggerHeaderHelpEvent,
-      handleTargetLeaveEvent
+      triggerTitleTipEvent,
+      handleTitleTipLeaveEvent
     }
 
     Object.assign($xeform, formMethods, formPrivateMethods)

package/packages/form/src/render.ts

@@ -27,7 +27,9 @@ function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
 
 export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
   const { data } = $xeform.props
+  const { computeTooltipOpts } = $xeform.getComputeMaps()
   const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const tooltipOpts = computeTooltipOpts.value
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
   const params = { data, property: field, item, $form: $xeform }
   const titleSlot = slots ? slots.title : null
@@ -37,9 +39,9 @@ export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods
     titVNs.push(
       (titlePrefix.content || titlePrefix.message)
         ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
-          content: getFuncText(titlePrefix.content || titlePrefix.message),
-          enterable: titlePrefix.enterable,
-          theme: titlePrefix.theme
+          ...tooltipOpts,
+          ...titlePrefix,
+          content: getFuncText(titlePrefix.content || titlePrefix.message)
         }, {
           default: () => renderPrefixIcon(titlePrefix)
         })
@@ -61,9 +63,9 @@ export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods
     fixVNs.push(
       (titleSuffix.content || titleSuffix.message)
         ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
-          content: getFuncText(titleSuffix.content || titleSuffix.message),
-          enterable: titleSuffix.enterable,
-          theme: titleSuffix.theme
+          ...tooltipOpts,
+          ...titleSuffix,
+          content: getFuncText(titleSuffix.content || titleSuffix.message)
         }, {
           default: () => renderSuffixIcon(titleSuffix)
         })

package/packages/form/src/util.ts

@@ -2,7 +2,7 @@ import { watch } from 'vue'
 import XEUtils from 'xe-utils'
 import { ItemInfo } from './itemInfo'
 
-import { VxeFormConstructor } from '../../../types/all'
+import { VxeFormConstructor, VxeFormDefines } from '../../../types/all'
 
 export interface XEFormItemProvide {
   formItem: ItemInfo;
@@ -16,6 +16,13 @@ export function createItem ($xeform: VxeFormConstructor, _vm: any) {
   return isFormItem(_vm) ? _vm : new ItemInfo($xeform, _vm)
 }
 
+export const handleFieldOrItem = ($xeform: VxeFormConstructor, fieldOrItem: string | VxeFormDefines.ItemInfo) => {
+  if (fieldOrItem) {
+    return XEUtils.isString(fieldOrItem) ? $xeform.getItemByField(fieldOrItem) : fieldOrItem
+  }
+  return null
+}
+
 export function watchItem (props: any, formItem: ItemInfo) {
   Object.keys(props).forEach(name => {
     watch(() => props[name], (value: any) => {

package/packages/form-gather/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const FormGather = Object.assign(VxeFormGatherComponent, {
   install (app: App) {
-    dynamicApp.component(VxeFormGatherComponent.name, VxeFormGatherComponent)
     app.component(VxeFormGatherComponent.name, VxeFormGatherComponent)
   }
 })
 
+dynamicApp.component(VxeFormGatherComponent.name, VxeFormGatherComponent)
+
 export default FormGather

package/packages/form-item/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const FormItem = Object.assign(VxeFormItemComponent, {
   install (app: App) {
-    dynamicApp.component(VxeFormItemComponent.name, VxeFormItemComponent)
     app.component(VxeFormItemComponent.name, VxeFormItemComponent)
   }
 })
 
+dynamicApp.component(VxeFormItemComponent.name, VxeFormItemComponent)
+
 export default FormItem

package/packages/grid/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Grid = Object.assign(VxeGridComponent, {
   install (app: App) {
-    dynamicApp.component(VxeGridComponent.name, VxeGridComponent)
     app.component(VxeGridComponent.name, VxeGridComponent)
   }
 })
 
+dynamicApp.component(VxeGridComponent.name, VxeGridComponent)
+
 export default Grid

package/packages/grid/src/grid.ts

@@ -1,7 +1,8 @@
 import { defineComponent, h, PropType, ref, Ref, computed, provide, getCurrentInstance, resolveComponent, ComponentOptions, reactive, onUnmounted, watch, nextTick, VNode, ComponentPublicInstance, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { errLog, getLastZIndex, nextZIndex, isEnableConf } from '../../tools/utils'
+import { getLastZIndex, nextZIndex, isEnableConf } from '../../tools/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode } from '../../tools/dom'
+import { errLog } from '../../tools/log'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import tableComponentProps from '../../table/src/props'

package/packages/header/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Header = Object.assign(VxeTableHeader, {
   install (app: App) {
-    dynamicApp.component(VxeTableHeader.name, VxeTableHeader)
     app.component(VxeTableHeader.name, VxeTableHeader)
   }
 })
 
+dynamicApp.component(VxeTableHeader.name, VxeTableHeader)
+
 export default Header

package/packages/header/src/header.ts

@@ -263,7 +263,7 @@ export default defineComponent({
                 rowspan: column.rowSpan > 1 ? column.rowSpan : null,
                 style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
                 ...thOns,
-                key: columnKey || isColGroup ? column.id : $columnIndex
+                key: columnKey || columnOpts.useKey || isColGroup ? column.id : $columnIndex
               }, [
                 h('div', {
                   class: ['vxe-cell', {

package/packages/input/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Input = Object.assign(VxeInputConstructor, {
   install (app: App) {
-    dynamicApp.component(VxeInputConstructor.name, VxeInputConstructor)
     app.component(VxeInputConstructor.name, VxeInputConstructor)
   }
 })
 
+dynamicApp.component(VxeInputConstructor.name, VxeInputConstructor)
+
 export default Input

package/packages/input/src/date.ts

@@ -0,0 +1,42 @@
+import XEUtils from 'xe-utils'
+
+import { VxeInputPropTypes } from '../../../types/all'
+
+export function toStringTimeDate (str: VxeInputPropTypes.ModelValue) {
+  if (str) {
+    const rest = new Date()
+    let h = 0
+    let m = 0
+    let s = 0
+    if (XEUtils.isDate(str)) {
+      h = str.getHours()
+      m = str.getMinutes()
+      s = str.getSeconds()
+    } else {
+      str = XEUtils.toValueString(str)
+      const parses = str.match(/^(\d{1,2})(:(\d{1,2}))?(:(\d{1,2}))?/)
+      if (parses) {
+        h = XEUtils.toNumber(parses[1])
+        m = XEUtils.toNumber(parses[3])
+        s = XEUtils.toNumber(parses[5])
+      }
+    }
+    rest.setHours(h)
+    rest.setMinutes(m)
+    rest.setSeconds(s)
+    return rest
+  }
+  return new Date('')
+}
+
+export function getDateQuarter (date: Date) {
+  const month = date.getMonth()
+  if (month < 3) {
+    return 1
+  } else if (month < 6) {
+    return 2
+  } else if (month < 9) {
+    return 3
+  }
+  return 4
+}

package/packages/input/src/input.ts

@@ -5,6 +5,8 @@ import { useSize } from '../../hooks/size'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../tools/utils'
 import { hasClass, getAbsolutePos, getEventTargetNode } from '../../tools/dom'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
+import { toStringTimeDate, getDateQuarter } from './date'
+import { handleNumber, toFloatValueFixed } from './number'
 
 import { VNodeStyle, VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, VxeInputPropTypes, InputPrivateRef } from '../../../types/all'
 
@@ -52,33 +54,6 @@ const yearSize = 20
 const monthSize = 20
 const quarterSize = 8
 
-function toStringTimeDate (str: VxeInputPropTypes.ModelValue) {
-  if (str) {
-    const rest = new Date()
-    let h = 0
-    let m = 0
-    let s = 0
-    if (XEUtils.isDate(str)) {
-      h = str.getHours()
-      m = str.getMinutes()
-      s = str.getSeconds()
-    } else {
-      str = XEUtils.toValueString(str)
-      const parses = str.match(/^(\d{1,2})(:(\d{1,2}))?(:(\d{1,2}))?/)
-      if (parses) {
-        h = XEUtils.toNumber(parses[1])
-        m = XEUtils.toNumber(parses[3])
-        s = XEUtils.toNumber(parses[5])
-      }
-    }
-    rest.setHours(h)
-    rest.setMinutes(m)
-    rest.setSeconds(s)
-    return rest
-  }
-  return new Date('')
-}
-
 export default defineComponent({
   name: 'VxeInput',
   props: {
@@ -410,18 +385,6 @@ export default defineComponent({
       return XEUtils.chunk(yearList, 4)
     })
 
-    const getDateQuarter = (date: Date) => {
-      const month = date.getMonth()
-      if (month < 3) {
-        return 1
-      } else if (month < 6) {
-        return 2
-      } else if (month < 9) {
-        return 3
-      }
-      return 4
-    }
-
     const computeQuarterList = computed(() => {
       const { selectMonth, currentDate } = reactData
       const quarters: DateQuarterItem[] = []
@@ -609,18 +572,7 @@ export default defineComponent({
       return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float')
     })
 
-    const handleNumber = (val: string | number) => {
-      return XEUtils.isString(val) ? val.replace(/,/g, '') : val
-    }
-
-    function toFloatValueFixed (inputValue: string | number, digitsValue: number) {
-      if (/^-/.test('' + inputValue)) {
-        return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue)
-      }
-      return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue)
-    }
-
-    function getNumberValue (val: any) {
+    const getNumberValue = (val: any) => {
       const { type, exponential } = props
       const inpMaxlength = computeInpMaxlength.value
       const digitsValue = computeDigitsValue.value

package/packages/input/src/number.ts

@@ -0,0 +1,12 @@
+import XEUtils from 'xe-utils'
+
+export function handleNumber (val: string | number) {
+  return XEUtils.isString(val) ? val.replace(/,/g, '') : val
+}
+
+export function toFloatValueFixed (inputValue: string | number, digitsValue: number) {
+  if (/^-/.test('' + inputValue)) {
+    return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue)
+  }
+  return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue)
+}

package/packages/list/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const List = Object.assign(VxeListComponent, {
   install (app: App) {
-    dynamicApp.component(VxeListComponent.name, VxeListComponent)
     app.component(VxeListComponent.name, VxeListComponent)
   }
 })
 
+dynamicApp.component(VxeListComponent.name, VxeListComponent)
+
 export default List

package/packages/menu/index.ts

@@ -8,9 +8,10 @@ export const Menu = {
   Panel: PanelComponent,
   install (app: App) {
     VXETable.hooks.add('$tableMenu', menuHook)
-    dynamicApp.component(PanelComponent.name, PanelComponent)
     app.component(PanelComponent.name, PanelComponent)
   }
 }
 
+dynamicApp.component(PanelComponent.name, PanelComponent)
+
 export default Menu

package/packages/modal/index.ts

@@ -98,10 +98,11 @@ export const modal = ModalController
 
 export const Modal = Object.assign(VxeModalComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeModalComponent.name, VxeModalComponent)
     app.component(VxeModalComponent.name, VxeModalComponent)
     VXETable.modal = ModalController
   }
 })
 
+dynamicApp.component(VxeModalComponent.name, VxeModalComponent)
+
 export default Modal

package/packages/modal/src/modal.ts

@@ -2,7 +2,8 @@ import { defineComponent, h, Teleport, ref, Ref, computed, reactive, nextTick, w
 import XEUtils from 'xe-utils'
 import { useSize } from '../../hooks/size'
 import { getDomNode, getEventTargetNode } from '../../tools/dom'
-import { errLog, getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils'
+import { getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils'
+import { errLog } from '../../tools/log'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VxeButtonConstructor from '../../button/src/button'

package/packages/optgroup/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Optgroup = Object.assign(VxeOptgroupComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeOptgroupComponent.name, VxeOptgroupComponent)
     app.component(VxeOptgroupComponent.name, VxeOptgroupComponent)
   }
 })
 
+dynamicApp.component(VxeOptgroupComponent.name, VxeOptgroupComponent)
+
 export default Optgroup

package/packages/option/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Option = Object.assign(VxeOptionComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeOptionComponent.name, VxeOptionComponent)
     app.component(VxeOptionComponent.name, VxeOptionComponent)
   }
 })
 
+dynamicApp.component(VxeOptionComponent.name, VxeOptionComponent)
+
 export default Option

package/packages/pager/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Pager = Object.assign(VxePagerComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxePagerComponent.name, VxePagerComponent)
     app.component(VxePagerComponent.name, VxePagerComponent)
   }
 })
 
+dynamicApp.component(VxePagerComponent.name, VxePagerComponent)
+
 export default Pager

package/packages/pager/src/pager.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, PropType, computed, inject, resolveComponent, ComponentOptions, ref, Ref, nextTick } from 'vue'
+import { defineComponent, h, PropType, computed, inject, resolveComponent, ComponentOptions, ref, Ref, reactive, nextTick, watch } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { hasEventKey, EVENT_KEYS } from '../../tools/event'
 import { useSize } from '../../hooks/size'
 
-import { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, PagerPrivateRef, VxeGridConstructor, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods } from '../../../types/all'
+import { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, PagerPrivateRef, VxeGridConstructor, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods, PagerReactData } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxePager',
@@ -57,6 +57,10 @@ export default defineComponent({
 
     const $xegrid = inject('$xegrid', null as VxeGridConstructor | null)
 
+    const reactData = reactive<PagerReactData>({
+      inpCurrPage: props.currentPage
+    })
+
     const refElem = ref() as Ref<HTMLDivElement>
 
     const refMaps: PagerPrivateRef = {
@@ -165,6 +169,11 @@ export default defineComponent({
       pagerMethods.dispatchEvent('page-change', { type: 'size', pageSize, currentPage: Math.min(props.currentPage, getPageCount(props.total, pageSize)) })
     }
 
+    const jumpInputEvent = (evnt: KeyboardEvent) => {
+      const inputElem: HTMLInputElement = evnt.target as HTMLInputElement
+      reactData.inpCurrPage = inputElem.value
+    }
+
     const jumpKeydownEvent = (evnt: KeyboardEvent) => {
       if (hasEventKey(evnt, EVENT_KEYS.ENTER)) {
         triggerJumpEvent(evnt)
@@ -337,9 +346,10 @@ export default defineComponent({
         }, GlobalConfig.i18n('vxe.pager.goto')) : null,
         h('input', {
           class: 'vxe-pager--goto',
-          value: props.currentPage,
+          value: reactData.inpCurrPage,
           type: 'text',
           autocomplete: 'off',
+          onInput: jumpInputEvent,
           onKeydown: jumpKeydownEvent,
           onBlur: triggerJumpEvent
         }),
@@ -405,6 +415,10 @@ export default defineComponent({
 
     Object.assign($xepager, pagerMethods, pagerPrivateMethods)
 
+    watch(() => props.currentPage, (value) => {
+      reactData.inpCurrPage = value
+    })
+
     const renderVN = () => {
       const { align, layouts, className } = props
       const childNodes = []

package/packages/pulldown/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Pulldown = Object.assign(VxePulldownComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxePulldownComponent.name, VxePulldownComponent)
     app.component(VxePulldownComponent.name, VxePulldownComponent)
   }
 })
 
+dynamicApp.component(VxePulldownComponent.name, VxePulldownComponent)
+
 export default Pulldown

package/packages/radio/index.ts

@@ -4,9 +4,10 @@ import { dynamicApp } from '../dynamics'
 
 export const Radio = Object.assign(VxeRadioComponent, {
   install: function (app: App) {
-    dynamicApp.component(VxeRadioComponent.name, VxeRadioComponent)
     app.component(VxeRadioComponent.name, VxeRadioComponent)
   }
 })
 
+dynamicApp.component(VxeRadioComponent.name, VxeRadioComponent)
+
 export default Radio