vxe-pc-ui 3.1.21 → 3.1.23

package/packages/slider/src/slider.ts

@@ -1,23 +1,115 @@
-import { CreateElement, VNode } from 'vue'
+import { CreateElement, VNode, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { createEvent } from '../../ui'
+import { getConfig, createEvent, renderEmptyElement } from '../../ui'
 
-import type { SliderReactData, VxeSliderEmits, ValueOf } from '../../../types'
+import type { SliderReactData, VxeSliderEmits, ValueOf, VxeSliderPropTypes, VxeFormDefines, VxeComponentSizeType, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeSlider',
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
   props: {
+    value: [String, Number, Array] as PropType<VxeSliderPropTypes.ModelValue>,
+    vertical: Boolean as PropType<VxeSliderPropTypes.Vertical>,
+    max: {
+      type: [String, Number] as PropType<VxeSliderPropTypes.Max>,
+      default: () => getConfig().slider.max
+    },
+    min: {
+      type: [String, Number] as PropType<VxeSliderPropTypes.Min>,
+      default: () => getConfig().slider.min
+    },
+    step: {
+      type: [String, Number] as PropType<VxeSliderPropTypes.Step>,
+      default: () => getConfig().slider.step
+    },
+    size: {
+      type: String as PropType<VxeSliderPropTypes.Size>,
+      default: () => getConfig().slider.size || getConfig().size
+    },
+    range: {
+      type: Boolean as PropType<VxeSliderPropTypes.Range>,
+      default: () => getConfig().slider.range
+    },
+    readonly: {
+      type: Boolean as PropType<VxeSliderPropTypes.Readonly>,
+      default: null
+    },
+    disabled: {
+      type: Boolean as PropType<VxeSliderPropTypes.Disabled>,
+      default: null
+    }
+  },
+  inject: {
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
   },
   data () {
     const xID = XEUtils.uniqueId()
     const reactData: SliderReactData = {
+      startValue: 0,
+      endValue: 0
     }
     return {
       xID,
       reactData
     }
   },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+      $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
+      formItemInfo(): VxeFormDefines.ProvideItemInfo | null
+    }),
+    computeFormReadonly () {
+      const $xeSlider = this
+      const props = $xeSlider
+      const $xeForm = $xeSlider.$xeForm
+
+      const { readonly } = props
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly
+        }
+        return false
+      }
+      return readonly
+    },
+    computeIsDisabled () {
+      const $xeSlider = this
+      const props = $xeSlider
+      const $xeForm = $xeSlider.$xeForm
+
+      const { disabled } = props
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled
+        }
+        return false
+      }
+      return disabled
+    },
+    computeMaxNum () {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      return XEUtils.toNumber(props.max || 0)
+    },
+    computeMinNum () {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      return XEUtils.toNumber(props.min || 0)
+    }
+  },
   methods: {
     //
     // Method
@@ -26,21 +118,208 @@ export default defineVxeComponent({
       const $xeSlider = this
       $xeSlider.$emit(type, createEvent(evnt, { $watermark: $xeSlider }, params))
     },
+    emitModel (value: any) {
+      const $xeSlider = this
+
+      $xeSlider.$emit('modelValue', value)
+    },
+    getStartPercent (startValue: number) {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      const { range } = props
+      const maxNum = $xeSlider.computeMaxNum
+      const minNum = $xeSlider.computeMinNum
+      return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0
+    },
+    getEndPercent (startValue: number, endValue: number) {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      const { range } = props
+      const maxNum = $xeSlider.computeMaxNum
+      const minNum = $xeSlider.computeMinNum
+      return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100)
+    },
+    updateModel () {
+      const $xeSlider = this
+      const props = $xeSlider
+      const reactData = $xeSlider.reactData
+
+      const { value } = props
+      if (XEUtils.isArray(value)) {
+        const [sVal, eVal] = XEUtils.clone(value, true).sort()
+        reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0))
+        reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0))
+      } else {
+        reactData.startValue = 0
+        reactData.endValue = XEUtils.floor(XEUtils.toNumber(value || 0))
+      }
+    },
+    updateBarStyle () {
+      const $xeSlider = this
+      const reactData = $xeSlider.reactData
+
+      const { startValue, endValue } = reactData
+      const trackElem = $xeSlider.$refs.refTrackElem as HTMLDivElement
+      const startBtnElem = $xeSlider.$refs.refStartBtnElem as HTMLDivElement
+      const endBtnElem = $xeSlider.$refs.refEndBtnElem as HTMLDivElement
+      let startPercent = 0
+      let endPercent = 0
+      if (startValue > endValue) {
+        startPercent = $xeSlider.getStartPercent(endValue)
+        endPercent = $xeSlider.getEndPercent(endValue, startValue)
+      } else {
+        startPercent = $xeSlider.getStartPercent(startValue)
+        endPercent = $xeSlider.getEndPercent(startValue, endValue)
+      }
+      if (trackElem) {
+        trackElem.style.left = `${startPercent}%`
+        trackElem.style.width = `${endPercent}%`
+      }
+      if (startBtnElem) {
+        startBtnElem.style.left = `${startPercent}%`
+      }
+      if (endBtnElem) {
+        endBtnElem.style.left = `${XEUtils.floor(startPercent + endPercent)}%`
+      }
+    },
+    changeEvent (evnt: MouseEvent) {
+      const $xeSlider = this
+      const props = $xeSlider
+      const reactData = $xeSlider.reactData
+      const $xeForm = $xeSlider.$xeForm
+      const formItemInfo = $xeSlider.formItemInfo
+
+      const { range } = props
+      const { startValue, endValue } = reactData
+      const value = range ? [startValue, endValue].sort() : endValue
+      $xeSlider.emitModel(value)
+      $xeSlider.dispatchEvent('change', { value }, evnt)
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
+      }
+    },
+    handleMousedownEvent (evnt: MouseEvent, isEnd: boolean) {
+      const $xeSlider = this
+      const reactData = $xeSlider.reactData
+
+      const formReadonly = $xeSlider.computeFormReadonly
+      const isDisabled = $xeSlider.computeIsDisabled
+      const maxNum = $xeSlider.computeMaxNum
+      const minNum = $xeSlider.computeMinNum
+      if (!(formReadonly || isDisabled)) {
+        evnt.preventDefault()
+        const domMousemove = document.onmousemove
+        const domMouseup = document.onmouseup
+        document.onmousemove = evnt => {
+          evnt.preventDefault()
+          const barElem = $xeSlider.$refs.refBarElem as HTMLDivElement
+          if (barElem) {
+            const barRect = barElem.getBoundingClientRect()
+            const trackWidth = (evnt.clientX - barRect.left) / 914
+            if (isEnd) {
+              reactData.endValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)))
+            } else {
+              reactData.startValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))))
+            }
+          }
+          $xeSlider.updateBarStyle()
+        }
+        document.onmouseup = (evnt: MouseEvent) => {
+          document.onmousemove = domMousemove
+          document.onmouseup = domMouseup
+          $xeSlider.changeEvent(evnt)
+          $xeSlider.updateBarStyle()
+        }
+      }
+    },
+    handleStartMousedownEvent (evnt: MouseEvent) {
+      const $xeSlider = this
+
+      const endBtnElem = $xeSlider.$refs.refEndBtnElem as HTMLDivElement
+      const startBtnElem = evnt.currentTarget as HTMLDivElement
+      $xeSlider.handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false)
+    },
+    handleEndMousedownEvent (evnt: MouseEvent) {
+      const $xeSlider = this
+
+      const startBtnElem = $xeSlider.$refs.refStartBtnElem as HTMLDivElement
+      const endBtnElem = evnt.currentTarget as HTMLDivElement
+      $xeSlider.handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true)
+    },
 
     //
     // Render
     //
     renderVN (h: CreateElement): VNode {
       const $xeSlider = this
-      const slots = $xeSlider.$scopedSlots
+      const props = $xeSlider
 
-      const defaultSlot = slots.default
+      const { vertical, range } = props
+      const vSize = $xeSlider.computeSize
+      const formReadonly = $xeSlider.computeFormReadonly
+      const isDisabled = $xeSlider.computeIsDisabled
       return h('div', {
         ref: 'refElem',
-        class: 'vxe-slider'
-      }, defaultSlot ? defaultSlot({}) : [])
+        class: ['vxe-slider', {
+          [`size--${vSize}`]: vSize,
+          'is--vertical': vertical,
+          'is--readonly': formReadonly,
+          'is--disabled': isDisabled
+        }]
+      }, [
+        h('div', {
+          class: 'vxe-slider--inner'
+        }, [
+          h('div', {
+            ref: 'refBarElem',
+            class: 'vxe-slider--bar-wrapper'
+          }),
+          h('div', {
+            ref: 'refTrackElem',
+            class: 'vxe-slider--bar-track'
+          }),
+          formReadonly || !range
+            ? renderEmptyElement($xeSlider)
+            : h('div', {
+              ref: 'refStartBtnElem',
+              class: 'vxe-slider--bar-btn vxe-slider--start-btn',
+              on: {
+                mousedown: $xeSlider.handleStartMousedownEvent
+              }
+            }),
+          formReadonly
+            ? renderEmptyElement($xeSlider)
+            : h('div', {
+              ref: 'refEndBtnElem',
+              class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+              on: {
+                mousedown: $xeSlider.handleEndMousedownEvent
+              }
+            })
+        ])
+      ])
+    }
+  },
+  watch: {
+    value () {
+      const $xeSlider = this
+
+      $xeSlider.updateModel()
     }
   },
+  created () {
+    const $xeSlider = this
+
+    $xeSlider.updateModel()
+  },
+  mounted () {
+    const $xeSlider = this
+
+    $xeSlider.updateBarStyle()
+  },
   render (this: any, h) {
     return this.renderVN(h)
   }

package/packages/tabs/src/tabs.ts

@@ -261,21 +261,27 @@ export default defineVxeComponent({
       const beforeMethod = props.beforeChangeMethod || getConfig().tabs.beforeChangeMethod
       const { activeName } = reactData
       const { name } = item
+      const value = name
+      $xeTabs.dispatchEvent('tab-click', { name }, evnt)
       if (trigger === 'manual') {
-        $xeTabs.dispatchEvent('tab-click', { name }, evnt)
         return
       }
-      const value = name
-      reactData.activeName = name
-      $xeTabs.emitModel(value)
-      $xeTabs.dispatchEvent('tab-click', { name }, evnt)
-      $xeTabs.addInitName(name, evnt)
       if (name !== activeName) {
-        if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })) {
-          $xeTabs.dispatchEvent('change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
-        } else {
+        Promise.resolve(
+          !beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })
+        ).then((status) => {
+          if (status) {
+            reactData.activeName = name
+            $xeTabs.emitModel(value)
+            $xeTabs.addInitName(name, evnt)
+            $xeTabs.dispatchEvent('change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+            $xeTabs.dispatchEvent('tab-change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+          } else {
+            $xeTabs.dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+          }
+        }).catch(() => {
           $xeTabs.dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
-        }
+        })
       }
     },
     handleRefreshTabEvent (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps) {
@@ -317,11 +323,17 @@ export default defineVxeComponent({
         const nextItem = index < list.length - 1 ? list[index + 1] : list[index - 1]
         nextName = nextItem ? nextItem.name : null
       }
-      if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })) {
-        $xeTabs.dispatchEvent('tab-close', { value, name, nextName }, evnt)
-      } else {
+      Promise.resolve(
+        !beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })
+      ).then(status => {
+        if (status) {
+          $xeTabs.dispatchEvent('tab-close', { value, name, nextName }, evnt)
+        } else {
+          $xeTabs.dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
+        }
+      }).catch(() => {
         $xeTabs.dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
-      }
+      })
     },
     startScrollAnimation  (offsetPos: number, offsetSize: number) {
       const $xeTabs = this

package/packages/ui/index.ts

@@ -254,7 +254,10 @@ setConfig({
   select: {
     multiCharOverflow: 8
   },
-  slider: {},
+  slider: {
+    max: 100,
+    min: 0
+  },
   steps: {},
   switch: {},
   tabPane: {},

package/styles/components/avatar.scss

@@ -1,4 +1,4 @@
-$btnThemeList: (
+$avatarThemeList: (
   (
     name: "primary",
     textColor: var(--vxe-ui-font-primary-color),
@@ -28,11 +28,6 @@ $btnThemeList: (
     name: "error",
     textColor: var(--vxe-ui-status-error-color),
     btnColor: #fff,
-  ),
-  (
-    name: "perfect",
-    textColor: var(--vxe-ui-table-header-background-color),
-    btnColor: var(--vxe-ui-font-color),
   )
 );
 
@@ -64,8 +59,8 @@ $btnThemeList: (
       z-index: 1;
     }
   }
-  @for $index from 0 to length($btnThemeList) {
-    $item: nth($btnThemeList, $index + 1);
+  @for $index from 0 to length($avatarThemeList) {
+    $item: nth($avatarThemeList, $index + 1);
     $textColor: map-get($item, textColor);
     $btnColor: map-get($item, btnColor);
     &.theme--#{map-get($item, name)} {

package/styles/components/slider.scss

@@ -0,0 +1,138 @@
+@import '../helpers/mixin.scss';
+
+$sliderThemeList: (
+  (
+    name: "primary",
+    textColor: var(--vxe-ui-font-primary-color),
+    hoverColor: var(--vxe-ui-font-primary-lighten-color),
+    activeColor: var(--vxe-ui-font-primary-darken-color),
+    disabledColor: var(--vxe-ui-font-primary-disabled-color)
+  ),
+  (
+    name: "success",
+    textColor: var(--vxe-ui-status-success-color),
+    hoverColor: var(--vxe-ui-status-success-lighten-color),
+    activeColor: var(--vxe-ui-status-success-darken-color),
+    disabledColor: var(--vxe-ui-status-success-disabled-color)
+  ),
+  (
+    name: "info",
+    textColor: var(--vxe-ui-status-info-color),
+    hoverColor: var(--vxe-ui-status-info-lighten-color),
+    activeColor: var(--vxe-ui-status-info-darken-color),
+    disabledColor: var(--vxe-ui-status-info-disabled-color)
+  ),
+  (
+    name: "warning",
+    textColor: var(--vxe-ui-status-warning-color),
+    hoverColor: var(--vxe-ui-status-warning-lighten-color),
+    activeColor: var(--vxe-ui-status-warning-darken-color),
+    disabledColor: var(--vxe-ui-status-warning-disabled-color)
+  ),
+  (
+    name: "danger",
+    textColor: var(--vxe-ui-status-danger-color),
+    hoverColor: var(--vxe-ui-status-danger-lighten-color),
+    activeColor: var(--vxe-ui-status-danger-darken-color),
+    disabledColor: var(--vxe-ui-status-danger-disabled-color)
+  ),
+  (
+    name: "error",
+    textColor: var(--vxe-ui-status-error-color),
+    hoverColor: var(--vxe-ui-status-error-lighten-color),
+    activeColor: var(--vxe-ui-status-error-darken-color),
+    disabledColor: var(--vxe-ui-status-error-disabled-color)
+  )
+);
+
+.vxe-slider {
+  position: relative;
+  display: block;
+  padding: 0.5em 1em;
+  @for $index from 0 to length($sliderThemeList) {
+    $item: nth($sliderThemeList, $index + 1);
+    &.theme--#{map-get($item, name)} {
+      .vxe-slider--bar-track {
+        background-color: map-get($item, textColor);
+        &:hover {
+          background-color: map-get($item, hoverColor);
+        }
+        &:hover {
+          background-color: map-get($item, activeColor);
+        }
+      }
+      .vxe-slider--bar-btn {
+        background-color: map-get($item, textColor);
+      }
+    }
+  }
+  &.is--disabled {
+    .vxe-slider--bar-btn {
+      cursor: not-allowed;
+    }
+  }
+  &:not(.is--disabled) {
+    .vxe-slider--bar-wrapper,
+    .vxe-slider--inner {
+      cursor: pointer;
+    }
+    .vxe-slider--bar-btn {
+      &:hover {
+        transform: scale(1.2);
+      }
+      &:active {
+        transform: scale(1.1);
+      }
+    }
+  }
+  &.is--readonly {
+    .vxe-slider--bar-wrapper,
+    .vxe-slider--inner {
+      cursor: default;
+    }
+  }
+}
+.vxe-slider--inner {
+  position: relative;
+}
+
+.vxe-slider--bar-wrapper {
+  background-color: #e4e7ed;
+}
+.vxe-slider--bar-track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  background-color: var(--vxe-ui-font-primary-color);
+  &:hover {
+    background-color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    background-color: var(--vxe-ui-font-primary-darken-color);
+  }
+}
+.vxe-slider--bar-wrapper,
+.vxe-slider--bar-track {
+  height: 0.3em;
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-slider--bar-btn {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  top: -0.3em;
+  border-radius: 50%;
+  border: 0.15em solid  var(--vxe-ui-font-primary-color);
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1;
+  @include createAnimationTransition(transform, 0.1s);
+}
+.vxe-slider--start-btn {
+  left: -0.45em;
+}
+.vxe-slider--end-btn {
+  right: -0.45em;
+}

package/types/components/slider.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentStatusType, VxeComponentEventParams } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -16,9 +16,29 @@ export interface SliderPrivateRef {
 export interface VxeSliderPrivateRef extends SliderPrivateRef { }
 
 export namespace VxeSliderPropTypes {
+  export type Size = VxeComponentSizeType
+  export type ModelValue = number | string | null | (number | string | null)[]
+  export type Max = number | string
+  export type Min = number | string
+  export type Vertical = boolean
+  export type Range = boolean
+  export type Status = VxeComponentStatusType
+  export type Step = number | string
+  export type Readonly = boolean
+  export type Disabled = boolean
 }
 
 export interface VxeSliderProps {
+  size?: VxeSliderPropTypes.Size
+  modelValue?: VxeSliderPropTypes.ModelValue
+  max?: VxeSliderPropTypes.Max
+  min?: VxeSliderPropTypes.Min
+  vertical?: VxeSliderPropTypes.Vertical
+  range?: VxeSliderPropTypes.Range
+  status?: VxeSliderPropTypes.Status
+  step?: VxeSliderPropTypes.Step
+  readonly?: VxeSliderPropTypes.Readonly
+  disabled?: VxeSliderPropTypes.Disabled
 }
 
 export interface SliderPrivateComputed {
@@ -26,6 +46,8 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
+  startValue: number
+  endValue: number
 }
 
 export interface SliderMethods {
@@ -35,7 +57,10 @@ export interface VxeSliderMethods extends SliderMethods { }
 export interface SliderPrivateMethods { }
 export interface VxeSliderPrivateMethods extends SliderPrivateMethods { }
 
-export type VxeSliderEmits = []
+export type VxeSliderEmits = [
+  'modelValue',
+  'change'
+]
 
 export namespace VxeSliderDefines {
   export interface SliderEventParams extends VxeComponentEventParams {

package/types/components/switch.d.ts

@@ -17,7 +17,7 @@ export interface VxeSwitchPrivateRef extends SwitchPrivateRef { }
 
 export namespace VxeSwitchPropTypes {
   export type Size = VxeComponentSizeType
-  export type ModelValue = string | number | boolean
+  export type ModelValue = string | number | boolean | null
   export type Disabled = boolean
   export type Readonly = boolean
   export type OpenLabel = string

package/types/components/tabs.d.ts

@@ -33,7 +33,7 @@ export namespace VxeTabsPropTypes {
     oldName: VxeTabsPropTypes.ModelValue
     newName: VxeTabsPropTypes.ModelValue
     option: Omit<VxeTabPaneProps, 'slots'>
-  }) => boolean
+  }) => boolean | Promise<boolean>
   /**
    * 请使用 closeConfig.beforeMethod
    * @deprecated
@@ -60,7 +60,7 @@ export namespace VxeTabsPropTypes {
       name: VxeTabsPropTypes.ModelValue
       nextName: VxeTabsPropTypes.ModelValue | null
       option: Omit<VxeTabPaneProps, 'slots'>
-    }) => boolean
+    }) => boolean | Promise<boolean>
     /**
      * 显示关闭按钮方法，该方法的返回值用来决定当前页签的关闭按钮是否显示
      * @returns boolean
@@ -181,6 +181,7 @@ export interface VxeTabsPrivateMethods extends TabsPrivateMethods { }
 export type VxeTabsEmits = [
   'input',
   'change',
+  'tab-change',
   'tab-change-fail',
   'tab-close',
   'tab-close-fail',
@@ -200,6 +201,8 @@ export namespace VxeTabsDefines {
     newName: VxeTabsPropTypes.ModelValue
   }
 
+  export interface TabChangeEventParams extends ChangeEventParams {}
+
   export interface TabChangeFailEventParams extends TabsEventParams {
     value: VxeTabsPropTypes.ModelValue
     name: VxeTabsPropTypes.ModelValue
@@ -227,6 +230,7 @@ export namespace VxeTabsDefines {
 
 export type VxeTabsEventProps = {
   onChange?: VxeTabsEvents.Change
+  onTabChange?: VxeTabsEvents.TabChange
   onTabChangeFail?: VxeTabsEvents.TabChangeFail
   onTabClose?: VxeTabsEvents.TabClose
   onTabCloseFail?: VxeTabsEvents.TabCloseFail
@@ -236,6 +240,7 @@ export type VxeTabsEventProps = {
 
 export interface VxeTabsListeners {
   change?: VxeTabsEvents.Change
+  tabChange?: VxeTabsEvents.TabChange
   tabChangeFail?: VxeTabsEvents.TabChangeFail
   tabClose?: VxeTabsEvents.TabClose
   tabCloseFail?: VxeTabsEvents.TabCloseFail
@@ -245,6 +250,7 @@ export interface VxeTabsListeners {
 
 export namespace VxeTabsEvents {
   export type Change = (params: VxeTabsDefines.ChangeEventParams) => void
+  export type TabChange = (params: VxeTabsDefines.TabChangeEventParams) => void
   export type TabChangeFail = (params: VxeTabsDefines.TabChangeFailEventParams) => void
   export type TabClose = (params: VxeTabsDefines.TabCloseEventParams) => void
   export type TabCloseFail = (params: VxeTabsDefines.TabCloseFailEventParams) => void