vxe-pc-ui 3.0.4 → 3.0.6

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": "3.0.4",
+  "version": "3.0.6",
   "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": "^3.0.3"
+    "@vxe-ui/core": "^3.0.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",

package/packages/tabs/src/tabs.ts

@@ -4,7 +4,8 @@ import XEUtils from 'xe-utils'
 import { createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } 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 type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, VxeComponentSizeType, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf } from '../../../types'
 
@@ -25,6 +26,9 @@ export default defineVxeComponent({
     },
     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>
   },
   inject: {
@@ -48,7 +52,8 @@ export default defineVxeComponent({
       lintLeft: 0,
       lintWidth: 0,
       isTabOver: false,
-      resizeFlag: 1
+      resizeFlag: 1,
+      cacheTabMaps: {}
     }
     const internalData: TabsInternalData = {
       slTimeout: undefined
@@ -70,6 +75,18 @@ export default defineVxeComponent({
 
       return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null
     },
+    computeCloseOpts () {
+      const $xeTabs = this
+      const props = $xeTabs
+
+      return Object.assign({}, getConfig().tabs.closeConfig, props.closeConfig)
+    },
+    computeRefreshOpts () {
+      const $xeTabs = this
+      const props = $xeTabs
+
+      return Object.assign({}, getConfig().tabs.refreshConfig, props.refreshConfig)
+    },
     computeTabOptions (this: any) {
       const $xeTabs = this
       const props = $xeTabs
@@ -206,15 +223,24 @@ export default defineVxeComponent({
       const reactData = $xeTabs.reactData
 
       let activeName: VxeTabsPropTypes.ModelValue = null
+      const nameMaps: Record<string, {
+        loading: boolean
+      }> = {}
       if (list && list.length) {
         let validVal = false
         activeName = props.value
         list.forEach((item) => {
-          if (activeName === item.name) {
-            validVal = true
-          }
-          if (item && item.preload) {
-            $xeTabs.addInitName(item.name, null)
+          const { name, preload } = item || {}
+          if (name) {
+            nameMaps[name] = {
+              loading: false
+            }
+            if (activeName === name) {
+              validVal = true
+            }
+            if (preload) {
+              $xeTabs.addInitName(name, null)
+            }
           }
         })
         if (!validVal) {
@@ -224,6 +250,7 @@ export default defineVxeComponent({
         }
       }
       reactData.activeName = activeName
+      reactData.cacheTabMaps = nameMaps
     },
     clickEvent  (evnt: KeyboardEvent, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) {
       const $xeTabs = this
@@ -244,10 +271,33 @@ export default defineVxeComponent({
       $xeTabs.dispatchEvent('tab-click', { name }, evnt)
       $xeTabs.addInitName(name, evnt)
       if (name !== activeName) {
-        if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name })) {
-          $xeTabs.dispatchEvent('change', { value, name, oldName: activeName, newName: name }, evnt)
+        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 {
-          $xeTabs.dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name }, evnt)
+          $xeTabs.dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name, option: item }, evnt)
+        }
+      }
+    },
+    handleRefreshTabEvent (evnt: KeyboardEvent, item: VxeTabPaneDefines.TabConfig | VxeTabPaneProps) {
+      const $xeTabs = this
+      const reactData = $xeTabs.reactData
+
+      evnt.stopPropagation()
+      const { activeName, cacheTabMaps } = reactData
+      const { name } = item
+      const refreshOpts = $xeTabs.computeRefreshOpts
+      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'])
         }
       }
     },
@@ -258,7 +308,8 @@ export default defineVxeComponent({
 
       evnt.stopPropagation()
       const { activeName } = reactData
-      const beforeMethod = props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
+      const closeOpts = $xeTabs.computeCloseOpts
+      const beforeMethod = closeOpts.beforeMethod || props.beforeCloseMethod || getConfig().tabs.beforeCloseMethod
       const { name } = item
       const value = activeName
       let nextName = value
@@ -266,7 +317,7 @@ 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 })) {
+      if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, value, name, nextName, option: item })) {
         $xeTabs.dispatchEvent('tab-close', { value, name, nextName }, evnt)
       } else {
         $xeTabs.dispatchEvent('tab-close-fail', { value, name, nextName }, evnt)
@@ -399,9 +450,14 @@ export default defineVxeComponent({
       const slots = $xeTabs.$scopedSlots
       const reactData = $xeTabs.reactData
 
-      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 = $xeTabs.computeCloseOpts
+      const closeVisibleMethod = closeOpts.visibleMethod
+      const refreshOpts = $xeTabs.computeRefreshOpts
+      const refreshVisibleMethod = refreshOpts.visibleMethod
+
       return h('div', {
         class: 'vxe-tabs-header'
       }, [
@@ -428,10 +484,14 @@ export default defineVxeComponent({
             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
                 ? {
@@ -463,7 +523,21 @@ export default defineVxeComponent({
                     class: 'vxe-tabs-header--item-name'
                   }, tabSlot ? $xeTabs.callSlot(tabSlot, { name, title }) : `${title}`)
                 ]),
-                showClose
+                (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive)
+                  ? h('div', {
+                    class: 'vxe-tabs-header--refresh-btn',
+                    on: {
+                      click (evnt: KeyboardEvent) {
+                        $xeTabs.handleRefreshTabEvent(evnt, item)
+                      }
+                    }
+                  }, [
+                    h('i', {
+                      class: isLoading ? getIcon().TABS_TAB_REFRESH_LOADING : getIcon().TABS_TAB_REFRESH
+                    })
+                  ])
+                  : renderEmptyElement($xeTabs),
+                (showClose || (isEnableConf(closeConfig) || closeOpts.enabled)) && (!closeVisibleMethod || closeVisibleMethod(params))
                   ? h('div', {
                     class: 'vxe-tabs-header--close-btn',
                     on: {

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.d.ts

@@ -102,6 +102,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 })
@@ -929,7 +932,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

@@ -32,17 +32,75 @@ 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 interface VxeTabsProps {
-  value?: VxeTabsPropTypes.ModelValue
+export type VxeTabsProps = {
+  modelValue?: VxeTabsPropTypes.ModelValue
   options?: VxeTabsPropTypes.Options
   destroyOnClose?: VxeTabsPropTypes.DestroyOnClose
   height?: VxeTabsPropTypes.Height
@@ -53,6 +111,19 @@ export interface VxeTabsProps {
   padding?: VxeTabsPropTypes.Padding
   trigger?: VxeTabsPropTypes.Trigger
   beforeChangeMethod?: VxeTabsPropTypes.BeforeChangeMethod
+  /**
+   * 关闭配置项
+   */
+  closeConfig?: VxeTabsPropTypes.CloseConfig
+  /**
+   * 刷新配置项
+   */
+  refreshConfig?: VxeTabsPropTypes.RefreshConfig
+
+  /**
+   * 请使用 closeConfig.beforeMethod
+   * @deprecated
+   */
   beforeCloseMethod?: VxeTabsPropTypes.BeforeCloseMethod
 }
 
@@ -68,6 +139,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