vxe-pc-ui 4.1.21 → 4.1.23

package/lib/vxe-tabs/style/style.min.css

@@ -1 +1 @@
-.vxe-tabs{display:flex;flex-direction:column;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.is--padding .vxe-tabs-pane--item{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header{display:flex;flex-direction:row}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;width:2em;border:1px solid var(--vxe-ui-input-border-color);cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;top:0;width:1px;height:100%;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-font-tinge-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--left-bar{border-right:0;box-shadow:8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--left-bar::after{right:-1px}.vxe-tabs-header--right-bar{border-left:0;box-shadow:-8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--right-bar::after{left:-1px}.vxe-tabs-header--extra{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--wrapper{position:relative;flex-grow:1}.vxe-tabs-header--wrapper::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--item-wrapper{position:relative;display:flex;flex-direction:row;overflow-y:hidden;overflow-x:auto;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i{font-size:1em}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane{flex-grow:1;overflow:hidden}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;bottom:0;left:0;height:2px;width:4px;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;width:4px;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1);transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);pointer-events:none;z-index:1}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--card .vxe-tabs-header{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--card .vxe-tabs-header--item{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header--item:first-child{border-left:0}.vxe-tabs--card .vxe-tabs-header--item:last-child{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--border-card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--border-card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--border-card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--border-card.is--height .vxe-tabs-pane--item,.vxe-tabs--border-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header{border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-tabs-card-header-background-color)}.vxe-tabs--border-card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--border-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--round-card .vxe-tabs-header--item{position:relative;z-index:2;margin:0 2px;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs--round-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item:first-child{margin-left:0}.vxe-tabs--round-card .vxe-tabs-header--item:last-child{margin-right:0}.vxe-tabs--round-card.is--height .vxe-tabs-pane--item,.vxe-tabs--round-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs .vxe-tabs-header--wrapper{height:var(--vxe-ui-tabs-header-height-default);overflow:hidden}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}
+.vxe-tabs{display:flex;flex-direction:column;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.is--padding .vxe-tabs-pane--item{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header{display:flex;flex-direction:row}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;width:2em;border:1px solid var(--vxe-ui-input-border-color);cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;top:0;width:1px;height:100%;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-font-tinge-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--left-bar{border-right:0;box-shadow:8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--left-bar::after{right:-1px}.vxe-tabs-header--right-bar{border-left:0;box-shadow:-8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--right-bar::after{left:-1px}.vxe-tabs-header--extra{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--wrapper{position:relative;flex-grow:1}.vxe-tabs-header--wrapper::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--item-wrapper{position:relative;display:flex;flex-direction:row;overflow-y:hidden;overflow-x:auto;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;margin:0 .2em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane{flex-grow:1;overflow:hidden}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;bottom:0;left:0;height:2px;width:4px;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;width:4px;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1);transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);pointer-events:none;z-index:1}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--card .vxe-tabs-header{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--card .vxe-tabs-header--item{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header--item:first-child{border-left:0}.vxe-tabs--card .vxe-tabs-header--item:last-child{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--border-card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--border-card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--border-card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--border-card.is--height .vxe-tabs-pane--item,.vxe-tabs--border-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header{border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-tabs-card-header-background-color)}.vxe-tabs--border-card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--border-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--round-card .vxe-tabs-header--item{position:relative;z-index:2;margin:0 2px;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs--round-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item:first-child{margin-left:0}.vxe-tabs--round-card .vxe-tabs-header--item:last-child{margin-right:0}.vxe-tabs--round-card.is--height .vxe-tabs-pane--item,.vxe-tabs--round-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs .vxe-tabs-header--wrapper{height:var(--vxe-ui-tabs-header-height-default);overflow:hidden}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.1.21",
+  "version": "4.1.23",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^4.0.9"
+    "@vxe-ui/core": "^4.0.10"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",

package/packages/tabs/src/tabs.ts

@@ -2,7 +2,8 @@ import { defineComponent, ref, h, reactive, inject, PropType, provide, computed,
 import { createEvent, getConfig, getIcon, globalEvents, permission } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit } from '../..//ui/src/dom'
-import { warnLog } from '../../ui/src/log'
+import { isEnableConf } from '../..//ui/src/utils'
+import { warnLog, errLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods } from '../../../types'
@@ -24,6 +25,9 @@ export default defineComponent({
     },
     trigger: String as PropType<VxeTabsPropTypes.Trigger>,
     beforeChangeMethod: Function as PropType<VxeTabsPropTypes.BeforeChangeMethod>,
+    closeConfig: Object as PropType<VxeTabsPropTypes.CloseConfig>,
+    refreshConfig: Object as PropType<VxeTabsPropTypes.RefreshConfig>,
+    // 已废弃
     beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
   },
   emits: [
@@ -52,7 +56,8 @@ export default defineComponent({
       lintLeft: 0,
       lintWidth: 0,
       isTabOver: false,
-      resizeFlag: 1
+      resizeFlag: 1,
+      cacheTabMaps: {}
     })
 
     const internalData: TabsInternalData = {
@@ -63,6 +68,14 @@ export default defineComponent({
       refElem
     }
 
+    const computeCloseOpts = computed(() => {
+      return Object.assign({}, getConfig().tabs.closeConfig, props.closeConfig)
+    })
+
+    const computeRefreshOpts = computed(() => {
+      return Object.assign({}, getConfig().tabs.refreshConfig, props.refreshConfig)
+    })
+
     const computeTabOptions = computed(() => {
       const { options } = props
       return (options || []).filter((item) => handleFilterTab(item))
@@ -161,15 +174,24 @@ export default defineComponent({
 
     const initDefaultName = (list?: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
       let activeName: VxeTabsPropTypes.ModelValue = null
+      const nameMaps: Record<string, {
+        loading: boolean
+      }> = {}
       if (list && list.length) {
         let validVal = false
         activeName = props.modelValue
         list.forEach((item) => {
-          if (activeName === item.name) {
-            validVal = true
-          }
-          if (item && item.preload) {
-            addInitName(item.name, null)
+          const { name, preload } = item || {}
+          if (name) {
+            nameMaps[name] = {
+              loading: false
+            }
+            if (activeName === name) {
+              validVal = true
+            }
+            if (preload) {
+              addInitName(name, null)
+            }
           }
         })
         if (!validVal) {
@@ -179,6 +201,7 @@ export default defineComponent({
         }
       }
       reactData.activeName = activeName
+      reactData.cacheTabMaps = nameMaps
     }
 
     const clickEvent = (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
@@ -196,10 +219,31 @@ export default defineComponent({
       dispatchEvent('tab-click', { name }, evnt)
       addInitName(name, evnt)
       if (name !== activeName) {
-        if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name })) {
-          dispatchEvent('change', { value, name, oldName: activeName, newName: name }, evnt)
+        if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name, option: item })) {
+          dispatchEvent('change', { value, name, oldName: activeName, newName: name, option: item }, evnt)
         } else {
-          dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name }, evnt)
+          dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+        }
+      }
+    }
+
+    const handleRefreshTabEvent = (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps) => {
+      evnt.stopPropagation()
+      const { activeName, cacheTabMaps } = reactData
+      const { name } = item
+      const refreshOpts = computeRefreshOpts.value
+      const { queryMethod } = refreshOpts
+      const cacheItem = name ? cacheTabMaps[name] : null
+      if (cacheItem) {
+        if (queryMethod) {
+          cacheItem.loading = true
+          Promise.resolve(
+            queryMethod({ $tabs: $xeTabs, value: activeName, name, option: item })
+          ).finally(() => {
+            cacheItem.loading = false
+          })
+        } else {
+          errLog('vxe.error.notFunc', ['refresh-config.queryMethod'])
         }
       }
     }
@@ -207,7 +251,8 @@ export default defineComponent({
     const handleCloseTabEvent = (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps, index: number, list: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
       evnt.stopPropagation()
       const { activeName } = reactData
-      const beforeMethod = props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
+      const closeOpts = computeCloseOpts.value
+      const beforeMethod = closeOpts.beforeMethod || props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
       const { name } = item
       const value = activeName
       let nextName = value
@@ -215,7 +260,7 @@ 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 })) {
+      if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })) {
         dispatchEvent('tab-close', { value, name, nextName }, evnt)
       } else {
         dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
@@ -360,9 +405,14 @@ export default defineComponent({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods)
 
     const renderTabHeader = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
-      const { type, titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose } = props
-      const { activeName, lintLeft, lintWidth, isTabOver } = reactData
+      const { type, titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose, closeConfig, refreshConfig } = props
+      const { activeName, lintLeft, lintWidth, isTabOver, cacheTabMaps } = reactData
       const extraSlot = slots.extra
+      const closeOpts = computeCloseOpts.value
+      const closeVisibleMethod = closeOpts.visibleMethod
+      const refreshOpts = computeRefreshOpts.value
+      const refreshVisibleMethod = refreshOpts.visibleMethod
+
       return h('div', {
         class: 'vxe-tabs-header'
       }, [
@@ -387,10 +437,14 @@ export default defineComponent({
             const tabSlot = slots ? slots.tab : null
             const itemWidth = titleWidth || allTitleWidth
             const itemAlign = titleAlign || allTitleAlign
+            const params = { $tabs: $xeTabs, value: activeName, name, option: item }
+            const isActive = activeName === name
+            const cacheItem = name ? cacheTabMaps[name] : null
+            const isLoading = cacheItem ? cacheItem.loading : false
             return h('div', {
               key: `${name}`,
               class: ['vxe-tabs-header--item', itemAlign ? `align--${itemAlign}` : '', {
-                'is--active': activeName === name
+                'is--active': isActive
               }],
               style: itemWidth
                 ? {
@@ -420,7 +474,19 @@ export default defineComponent({
                     class: 'vxe-tabs-header--item-name'
                   }, tabSlot ? callSlot(tabSlot, { name, title }) : `${title}`)
                 ]),
-                showClose
+                (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive)
+                  ? h('div', {
+                    class: 'vxe-tabs-header--refresh-btn',
+                    onClick (evnt: KeyboardEvent) {
+                      handleRefreshTabEvent(evnt, item)
+                    }
+                  }, [
+                    h('i', {
+                      class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
+                    })
+                  ])
+                  : createCommentVNode(),
+                (showClose || (isEnableConf(closeConfig) || closeOpts.enabled)) && (!closeVisibleMethod || closeVisibleMethod(params))
                   ? h('div', {
                     class: 'vxe-tabs-header--close-btn',
                     onClick (evnt: KeyboardEvent) {

package/packages/ui/index.ts

@@ -431,6 +431,8 @@ setIcon({
   TABS_TAB_BUTTON_LEFT: iconPrefix + 'arrow-left',
   TABS_TAB_BUTTON_RIGHT: iconPrefix + 'arrow-right',
   TABS_TAB_CLOSE: iconPrefix + 'close',
+  TABS_TAB_REFRESH: iconPrefix + 'refresh',
+  TABS_TAB_REFRESH_LOADING: iconPrefix + 'refresh roll',
 
   // text
   TEXT_COPY: iconPrefix + 'copy',

package/styles/components/drawer.scss

@@ -44,24 +44,6 @@
       opacity: 1;
     }
   }
-  &.is--loading {
-    .vxe-drawer--header,
-    .vxe-drawer--footer {
-      position: relative;
-      border-bottom-color: var(--vxe-ui-loading-background-color);
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        user-select: none;
-        background-color: var(--vxe-ui-loading-background-color);
-      }
-    }
-  }
   &:not(.lock--view) {
     pointer-events: none;
   }

package/styles/components/modal.scss

@@ -238,24 +238,6 @@ html[data-vxe-lock-scroll] {
       visibility: visible;
     }
   }
-  &.is--loading {
-    .vxe-modal--header,
-    .vxe-modal--footer {
-      position: relative;
-      border-bottom-color: var(--vxe-ui-loading-background-color);
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        user-select: none;
-        background-color: var(--vxe-ui-loading-background-color);
-      }
-    }
-  }
   &:not(.lock--view) {
     pointer-events: none;
   }

package/styles/components/tabs.scss

@@ -106,7 +106,9 @@
   flex-shrink: 0;
   padding: 0 0.5em;
   &.is--active {
-    color: var(--vxe-ui-font-primary-color);
+    .vxe-tabs-header--item-content {
+      color: var(--vxe-ui-font-primary-color);
+    }
   }
   &.align--left {
     text-align: left;
@@ -135,11 +137,13 @@
 .vxe-tabs-header--item-name {
   padding: 0 0.6em;
 }
+.vxe-tabs-header--refresh-btn,
 .vxe-tabs-header--close-btn {
   font-size: 0.8em;
   border-radius: 50%;
   width: 1.5em;
   height: 1.5em;
+  margin: 0 0.2em;
   line-height: 1.5em;
   text-align: center;
   &:hover {

package/types/components/table-module/validator.d.ts

@@ -1,8 +1,7 @@
-import { VxeTableDefines, VxeTableConstructor } from '../table'
-import { VxeGridConstructor } from '../grid'
+import { VxeTableDefines } from '../table'
 import { VxeColumnPropTypes } from '../column'
 
-/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-unused-vars,no-use-before-define */
 
 export interface TableValidatorMethods<D = any> {
   /**

package/types/components/table.d.ts

@@ -126,6 +126,9 @@ export namespace VxeTablePropTypes {
     $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
     $rowIndex: number
     column: VxeTableDefines.ColumnInfo<D>
+    columnIndex: number
+    $columnIndex: number
+    _columnIndex: number
     fixed: VxeColumnPropTypes.Fixed
     type: string
   }) => void | null | string | { [key: string]: boolean | null | undefined })
@@ -953,7 +956,7 @@ export namespace VxeTablePropTypes {
       columnIndex: number
       $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
       $grid: VxeGridConstructor<D> | null | undefined
-    }): boolean
+    }): void
   }
   export interface KeyboardOpts<D = any> extends KeyboardConfig<D> { }
 

package/types/components/tabs.d.ts

@@ -39,13 +39,71 @@ export namespace VxeTabsPropTypes {
     name: VxeTabsPropTypes.ModelValue
     oldName: VxeTabsPropTypes.ModelValue
     newName: VxeTabsPropTypes.ModelValue
+    option: Omit<VxeTabPaneProps, 'slots'>
   }) => boolean
+  /**
+   * 请使用 closeConfig.beforeMethod
+   * @deprecated
+   */
   export type BeforeCloseMethod = (params: {
     $tabs: VxeTabsConstructor
     value: VxeTabsPropTypes.ModelValue
     name: VxeTabsPropTypes.ModelValue
     nextName: VxeTabsPropTypes.ModelValue | null
+    option: Omit<VxeTabPaneProps, 'slots'>
   }) => boolean
+  export interface CloseConfig {
+    /**
+     * 是否启用
+     */
+    enabled?: boolean
+    /**
+     * 页签关闭方法，该方法的返回值用来决定当前页签是否允许关闭
+     * @returns boolean
+     */
+    beforeMethod?: (params: {
+      $tabs: VxeTabsConstructor
+      value: VxeTabsPropTypes.ModelValue
+      name: VxeTabsPropTypes.ModelValue
+      nextName: VxeTabsPropTypes.ModelValue | null
+      option: Omit<VxeTabPaneProps, 'slots'>
+    }) => boolean
+    /**
+     * 显示关闭按钮方法，该方法的返回值用来决定当前页签的关闭按钮是否显示
+     * @returns boolean
+     */
+    visibleMethod?: (params: {
+      $tabs: VxeTabsConstructor
+      value: VxeTabsPropTypes.ModelValue
+      name: VxeTabsPropTypes.ModelValue
+      option: Omit<VxeTabPaneProps, 'slots'>
+    }) => boolean
+  }
+  export interface RefreshConfig {
+    /**
+     * 是否启用
+     */
+    enabled?: boolean
+    /**
+     * 查询方法
+     */
+    queryMethod?: (params: {
+      $tabs: VxeTabsConstructor
+      value: VxeTabsPropTypes.ModelValue
+      name: VxeTabsPropTypes.ModelValue
+      option: Omit<VxeTabPaneProps, 'slots'>
+    }) => Promise<any> | void
+    /**
+     * 显示刷新按钮方法，该方法的返回值用来决定当前页签的刷新按钮是否显示
+     * @returns boolean
+     */
+    visibleMethod?: (params: {
+      $tabs: VxeTabsConstructor
+      value: VxeTabsPropTypes.ModelValue
+      name: VxeTabsPropTypes.ModelValue
+      option: Omit<VxeTabPaneProps, 'slots'>
+    }) => boolean
+  }
 }
 
 export type VxeTabsProps = {
@@ -60,6 +118,19 @@ export type VxeTabsProps = {
   padding?: VxeTabsPropTypes.Padding
   trigger?: VxeTabsPropTypes.Trigger
   beforeChangeMethod?: VxeTabsPropTypes.BeforeChangeMethod
+  /**
+   * 关闭配置项
+   */
+  closeConfig?: VxeTabsPropTypes.CloseConfig
+  /**
+   * 刷新配置项
+   */
+  refreshConfig?: VxeTabsPropTypes.RefreshConfig
+
+  /**
+   * 请使用 closeConfig.beforeMethod
+   * @deprecated
+   */
   beforeCloseMethod?: VxeTabsPropTypes.BeforeCloseMethod
 }
 
@@ -75,6 +146,9 @@ export interface TabsReactData {
   lintWidth: number
   isTabOver: boolean
   resizeFlag: number
+  cacheTabMaps: Record<string, {
+    loading: boolean
+  }>
 }
 
 export interface TabsInternalData {

package/types/ui/global-icon.d.ts

@@ -191,6 +191,8 @@ declare module '@vxe-ui/core' {
     TABS_TAB_BUTTON_LEFT?: string
     TABS_TAB_BUTTON_RIGHT?: string
     TABS_TAB_CLOSE?: string
+    TABS_TAB_REFRESH?: string
+    TABS_TAB_REFRESH_LOADING?: string
 
     // text
     TEXT_COPY?: string