vxe-pc-ui 4.2.13 → 4.2.15

package/packages/slider/src/slider.ts

@@ -1,29 +1,102 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, reactive, PropType, watch, computed, inject, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { createEvent } from '../../ui'
+import { getConfig, createEvent, renderEmptyElement, useSize } from '../../ui'
 
-import type { SliderReactData, VxeSliderEmits, SliderMethods, SliderPrivateMethods, ValueOf, SliderPrivateRef, VxeSliderPrivateComputed, VxeSliderConstructor, VxeSliderPrivateMethods } from '../../../types'
+import type { SliderReactData, VxeSliderEmits, VxeSliderPropTypes, SliderMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, SliderPrivateMethods, ValueOf, SliderPrivateRef, VxeSliderPrivateComputed, VxeSliderConstructor, VxeSliderPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeSlider',
   props: {
+    modelValue: [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
+    }
   },
   emits: [
+    'update:modelValue',
+    'change'
   ] as VxeSliderEmits,
   setup (props, context) {
     const { emit } = context
 
+    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
+    const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
+
     const xID = XEUtils.uniqueId()
 
+    const { computeSize } = useSize(props)
+
     const refElem = ref<HTMLDivElement>()
+    const refBarElem = ref<HTMLDivElement>()
+    const refTrackElem = ref<HTMLDivElement>()
+    const refStartBtnElem = ref<HTMLDivElement>()
+    const refEndBtnElem = ref<HTMLDivElement>()
 
     const reactData = reactive<SliderReactData>({
+      startValue: 0,
+      endValue: 0
     })
 
     const refMaps: SliderPrivateRef = {
       refElem
     }
 
+    const computeFormReadonly = computed(() => {
+      const { readonly } = props
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly
+        }
+        return false
+      }
+      return readonly
+    })
+
+    const computeIsDisabled = computed(() => {
+      const { disabled } = props
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled
+        }
+        return false
+      }
+      return disabled
+    })
+
+    const computeMaxNum = computed(() => {
+      return XEUtils.toNumber(props.max || 0)
+    })
+
+    const computeMinNum = computed(() => {
+      return XEUtils.toNumber(props.min || 0)
+    })
+
     const computeMaps: VxeSliderPrivateComputed = {
     }
 
@@ -37,6 +110,10 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeSliderConstructor & VxeSliderPrivateMethods
 
+    const emitModel = (value: any) => {
+      emit('update:modelValue', value)
+    }
+
     const dispatchEvent = (type: ValueOf<VxeSliderEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $slider: $xeSlider }, params))
     }
@@ -45,18 +122,172 @@ export default defineComponent({
       dispatchEvent
     }
 
+    const getStartPercent = (startValue: number) => {
+      const { range } = props
+      const maxNum = computeMaxNum.value
+      const minNum = computeMinNum.value
+      return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0
+    }
+
+    const getEndPercent = (startValue: number, endValue: number) => {
+      const { range } = props
+      const maxNum = computeMaxNum.value
+      const minNum = computeMinNum.value
+      return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100)
+    }
+
+    const updateModel = () => {
+      const { modelValue } = props
+      if (XEUtils.isArray(modelValue)) {
+        const [sVal, eVal] = XEUtils.clone(modelValue, 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(modelValue || 0))
+      }
+    }
+
+    const updateBarStyle = () => {
+      const { startValue, endValue } = reactData
+      const trackElem = refTrackElem.value
+      const startBtnElem = refStartBtnElem.value
+      const endBtnElem = refEndBtnElem.value
+      let startPercent = 0
+      let endPercent = 0
+      if (startValue > endValue) {
+        startPercent = getStartPercent(endValue)
+        endPercent = getEndPercent(endValue, startValue)
+      } else {
+        startPercent = getStartPercent(startValue)
+        endPercent = 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)}%`
+      }
+    }
+
+    const changeEvent = (evnt: MouseEvent) => {
+      const { range } = props
+      const { startValue, endValue } = reactData
+      const value = range ? [startValue, endValue].sort() : endValue
+      emitModel(value)
+      dispatchEvent('change', { value }, evnt)
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
+      }
+    }
+
+    const handleMousedownEvent = (evnt: MouseEvent, isEnd: boolean) => {
+      const formReadonly = computeFormReadonly.value
+      const isDisabled = computeIsDisabled.value
+      const maxNum = computeMaxNum.value
+      const minNum = computeMinNum.value
+      if (!(formReadonly || isDisabled)) {
+        evnt.preventDefault()
+        const domMousemove = document.onmousemove
+        const domMouseup = document.onmouseup
+        document.onmousemove = evnt => {
+          evnt.preventDefault()
+          const barElem = refBarElem.value
+          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))))
+            }
+          }
+          updateBarStyle()
+        }
+        document.onmouseup = (evnt: MouseEvent) => {
+          document.onmousemove = domMousemove
+          document.onmouseup = domMouseup
+          changeEvent(evnt)
+          updateBarStyle()
+        }
+      }
+    }
+
+    const handleStartMousedownEvent = (evnt: MouseEvent) => {
+      const endBtnElem = refEndBtnElem.value
+      const startBtnElem = evnt.currentTarget as HTMLDivElement
+      handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false)
+    }
+
+    const handleEndMousedownEvent = (evnt: MouseEvent) => {
+      const startBtnElem = refStartBtnElem.value
+      const endBtnElem = evnt.currentTarget as HTMLDivElement
+      handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true)
+    }
+
     const collapsePanePrivateMethods: SliderPrivateMethods = {
     }
 
     Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods)
 
     const renderVN = () => {
+      const { vertical, range } = props
+      const vSize = computeSize.value
+      const formReadonly = computeFormReadonly.value
+      const isDisabled = computeIsDisabled.value
       return h('div', {
         ref: refElem,
-        class: 'vxe-slider'
-      }, [])
+        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',
+              onMousedown: handleStartMousedownEvent
+            }),
+          formReadonly
+            ? renderEmptyElement($xeSlider)
+            : h('div', {
+              ref: refEndBtnElem,
+              class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+              onMousedown: handleEndMousedownEvent
+            })
+        ])
+      ])
     }
 
+    watch(() => props.modelValue, () => {
+      updateModel()
+    })
+
+    onMounted(() => {
+      updateBarStyle()
+    })
+
+    updateModel()
+
     $xeSlider.renderVN = renderVN
 
     return $xeSlider

package/packages/tabs/src/tabs.ts

@@ -33,6 +33,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
     'change',
+    'tab-change',
     'tab-change-fail',
     'tab-close',
     'tab-close-fail',
@@ -209,21 +210,27 @@ export default defineComponent({
       const beforeMethod = props.beforeChangeMethod || getConfig().tabs.beforeChangeMethod
       const { activeName } = reactData
       const { name } = item
+      const value = name
+      dispatchEvent('tab-click', { name }, evnt)
       if (trigger === 'manual') {
-        dispatchEvent('tab-click', { name }, evnt)
         return
       }
-      const value = name
-      reactData.activeName = name
-      emit('update:modelValue', value)
-      dispatchEvent('tab-click', { name }, evnt)
-      addInitName(name, evnt)
       if (name !== activeName) {
-        if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })) {
-          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
+            emit('update:modelValue', value)
+            addInitName(name, evnt)
+            dispatchEvent('change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+            dispatchEvent('tab-change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+          } else {
+            dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+          }
+        }).catch(() => {
           dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
-        }
+        })
       }
     }
 
@@ -260,11 +267,17 @@ export default defineComponent({
         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 })) {
-        dispatchEvent('tab-close', { value, name, nextName }, evnt)
-      } else {
+      Promise.resolve(
+        !beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })
+      ).then(status => {
+        if (status) {
+          dispatchEvent('tab-close', { value, name, nextName }, evnt)
+        } else {
+          dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
+        }
+      }).catch(() => {
         dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
-      }
+      })
     }
 
     const startScrollAnimation = (offsetPos: number, offsetSize: number) => {

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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentStatusType, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -23,9 +23,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 {
@@ -33,6 +53,8 @@ export interface SliderPrivateComputed {
 export interface VxeSliderPrivateComputed extends SliderPrivateComputed { }
 
 export interface SliderReactData {
+  startValue: number
+  endValue: number
 }
 
 export interface SliderMethods {
@@ -42,7 +64,10 @@ export interface VxeSliderMethods extends SliderMethods { }
 export interface SliderPrivateMethods { }
 export interface VxeSliderPrivateMethods extends SliderPrivateMethods { }
 
-export type VxeSliderEmits = []
+export type VxeSliderEmits = [
+  'update:modelValue',
+  'change'
+]
 
 export namespace VxeSliderDefines {
   export interface SliderEventParams extends VxeComponentEventParams {

package/types/components/switch.d.ts

@@ -25,7 +25,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

@@ -40,7 +40,7 @@ export namespace VxeTabsPropTypes {
     oldName: VxeTabsPropTypes.ModelValue
     newName: VxeTabsPropTypes.ModelValue
     option: Omit<VxeTabPaneProps, 'slots'>
-  }) => boolean
+  }) => boolean | Promise<boolean>
   /**
    * 请使用 closeConfig.beforeMethod
    * @deprecated
@@ -67,7 +67,7 @@ export namespace VxeTabsPropTypes {
       name: VxeTabsPropTypes.ModelValue
       nextName: VxeTabsPropTypes.ModelValue | null
       option: Omit<VxeTabPaneProps, 'slots'>
-    }) => boolean
+    }) => boolean | Promise<boolean>
     /**
      * 显示关闭按钮方法，该方法的返回值用来决定当前页签的关闭按钮是否显示
      * @returns boolean
@@ -188,6 +188,7 @@ export interface VxeTabsPrivateMethods extends TabsPrivateMethods { }
 export type VxeTabsEmits = [
   'update:modelValue',
   'change',
+  'tab-change',
   'tab-change-fail',
   'tab-close',
   'tab-close-fail',
@@ -207,6 +208,8 @@ export namespace VxeTabsDefines {
     newName: VxeTabsPropTypes.ModelValue
   }
 
+  export interface TabChangeEventParams extends ChangeEventParams {}
+
   export interface TabChangeFailEventParams extends TabsEventParams {
     value: VxeTabsPropTypes.ModelValue
     name: VxeTabsPropTypes.ModelValue
@@ -234,6 +237,7 @@ export namespace VxeTabsDefines {
 
 export type VxeTabsEventProps = {
   onChange?: VxeTabsEvents.Change
+  onTabChange?: VxeTabsEvents.TabChange
   onTabChangeFail?: VxeTabsEvents.TabChangeFail
   onTabClose?: VxeTabsEvents.TabClose
   onTabCloseFail?: VxeTabsEvents.TabCloseFail
@@ -243,6 +247,7 @@ export type VxeTabsEventProps = {
 
 export interface VxeTabsListeners {
   change?: VxeTabsEvents.Change
+  tabChange?: VxeTabsEvents.TabChange
   tabChangeFail?: VxeTabsEvents.TabChangeFail
   tabClose?: VxeTabsEvents.TabClose
   tabCloseFail?: VxeTabsEvents.TabCloseFail
@@ -252,6 +257,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