vxe-table 3.8.8 → 3.8.9-beta.1

package/packages/button/src/button.js

@@ -23,6 +23,7 @@ export default {
     title: String,
     disabled: Boolean,
     loading: Boolean,
+    trigger: { type: String, default: () => GlobalConfig.button.trigger },
     destroyOnClose: Boolean,
     className: [String, Function],
     popupClassName: [String, Function],
@@ -36,8 +37,9 @@ export default {
   data () {
     return {
       inited: false,
-      showPanel: false,
+      visiblePanel: false,
       animatVisible: false,
+      isActivated: false,
       panelIndex: 0,
       panelStyle: null,
       panelPlacement: null
@@ -97,6 +99,7 @@ export default {
     // }
 
     GlobalEvent.on(this, 'mousewheel', this.handleGlobalMousewheelEvent)
+    GlobalEvent.on(this, 'mousedown', this.handleGlobalMousedownEvent)
   },
   beforeDestroy () {
     const panelElem = this.$refs.panel
@@ -106,14 +109,25 @@ export default {
   },
   destroyed () {
     GlobalEvent.off(this, 'mousewheel')
+    GlobalEvent.off(this, 'mousedown')
   },
   render (h) {
-    const { $scopedSlots, className, popupClassName, title, inited, type, destroyOnClose, isFormBtn, btnMode, btnStatus, btnRound, btnCircle, vSize, name, disabled, loading, showPanel, animatVisible, panelPlacement } = this
+    const { $scopedSlots, className, popupClassName, trigger, title, inited, type, destroyOnClose, isFormBtn, btnMode, btnStatus, btnRound, btnCircle, vSize, name, disabled, loading, visiblePanel, animatVisible, panelPlacement } = this
     const downsSlot = $scopedSlots.dropdowns
+    const btnOns = {}
+    const panelOns = {}
+    if (downsSlot && trigger === 'hover') {
+      // hover 触发
+      btnOns.mouseenter = this.mouseenterTargetEvent
+      btnOns.mouseleave = this.mouseleaveTargetEvent
+
+      panelOns.onMouseenter = this.mouseenterDropdownEvent
+      panelOns.onMouseleave = this.mouseleaveDropdownEvent
+    }
     return downsSlot ? h('div', {
       class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: this }) : className) : '', {
         [`size--${vSize}`]: vSize,
-        'is--active': showPanel
+        'is--active': visiblePanel
       }]
     }, [
       h('button', {
@@ -133,9 +147,8 @@ export default {
           disabled: disabled || loading
         },
         on: {
-          mouseenter: this.mouseenterTargetEvent,
-          mouseleave: this.mouseleaveTargetEvent,
-          click: this.clickEvent
+          click: this.clickTargetEvent,
+          ...btnOns
         }
       }, this.renderContent(h).concat([
         h('i', {
@@ -147,7 +160,7 @@ export default {
         class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: this }) : popupClassName) : '', {
           [`size--${vSize}`]: vSize,
           'animat--leave': animatVisible,
-          'animat--enter': showPanel
+          'animat--enter': visiblePanel
         }],
         attrs: {
           placement: panelPlacement
@@ -159,10 +172,9 @@ export default {
           on: {
             mousedown: this.mousedownDropdownEvent,
             click: this.clickDropdownEvent,
-            mouseenter: this.mouseenterDropdownEvent,
-            mouseleave: this.mouseleaveDropdownEvent
+            ...panelOns
           }
-        }, destroyOnClose && !showPanel ? [] : downsSlot.call(this, {}, h))
+        }, destroyOnClose && !visiblePanel ? [] : downsSlot.call(this, {}, h))
       ] : null)
     ]) : h('button', {
       ref: 'xBtn',
@@ -226,10 +238,21 @@ export default {
       return contents
     },
     handleGlobalMousewheelEvent (evnt) {
-      if (this.showPanel && !DomTools.getEventTargetNode(evnt, this.$refs.panel).flag) {
+      if (this.visiblePanel && !DomTools.getEventTargetNode(evnt, this.$refs.panel).flag) {
         this.closePanel()
       }
     },
+    handleGlobalMousedownEvent (evnt) {
+      const { disabled, visiblePanel } = this
+      if (!disabled) {
+        const el = this.$refs.$el
+        const panelElem = this.$refs.panel
+        this.isActivated = DomTools.getEventTargetNode(evnt, el).flag || DomTools.getEventTargetNode(evnt, panelElem).flag
+        if (visiblePanel && !this.isActivated) {
+          this.closePanel()
+        }
+      }
+    },
     updateZindex () {
       if (this.panelIndex < UtilTools.getLastZIndex()) {
         this.panelIndex = UtilTools.nextZIndex()
@@ -257,7 +280,7 @@ export default {
         if (panelElem) {
           panelElem.dataset.active = 'N'
         }
-        this.showPanel = false
+        this.visiblePanel = false
         setTimeout(() => {
           if (!panelElem || panelElem.dataset.active !== 'Y') {
             this.animatVisible = false
@@ -277,21 +300,7 @@ export default {
       this.$emit('mouseleave', { $event: evnt })
     },
     mouseenterTargetEvent (evnt) {
-      const panelElem = this.$refs.panel
-      panelElem.dataset.active = 'Y'
-      if (!this.inited) {
-        this.inited = true
-        if (this.transfer) {
-          document.body.appendChild(panelElem)
-        }
-      }
-      this.showTime = setTimeout(() => {
-        if (panelElem.dataset.active === 'Y') {
-          this.mouseenterDropdownEvent()
-        } else {
-          this.animatVisible = false
-        }
-      }, 250)
+      this.openPanel()
       this.$emit('mouseenter', { $event: evnt })
     },
     mouseenterDropdownEvent () {
@@ -300,11 +309,11 @@ export default {
       this.animatVisible = true
       setTimeout(() => {
         if (panelElem.dataset.active === 'Y') {
-          this.showPanel = true
+          this.visiblePanel = true
           this.updateZindex()
           this.updatePlacement()
           setTimeout(() => {
-            if (this.showPanel) {
+            if (this.visiblePanel) {
               this.updatePlacement()
             }
           }, 50)
@@ -314,6 +323,36 @@ export default {
     mouseleaveDropdownEvent () {
       this.closePanel()
     },
+    clickTargetEvent (evnt) {
+      const { trigger } = this
+      if (trigger === 'click') {
+        if (this.visiblePanel) {
+          this.closePanel()
+        } else {
+          this.openPanel()
+        }
+      }
+      this.clickEvent(evnt)
+    },
+    openPanel () {
+      const { trigger } = this
+      const panelElem = this.$refs.panel
+      panelElem.dataset.active = 'Y'
+      if (!this.inited) {
+        this.inited = true
+        if (this.transfer) {
+          document.body.appendChild(panelElem)
+        }
+      }
+      this.showTime = setTimeout(() => {
+        if (panelElem.dataset.active === 'Y') {
+          this.mouseenterDropdownEvent()
+        } else {
+          this.animatVisible = false
+        }
+      }, trigger === 'click' ? 50 : 250)
+      return this.$nextTick()
+    },
     closePanel () {
       const panelElem = this.$refs.panel
       clearTimeout(this.showTime)
@@ -321,7 +360,7 @@ export default {
         panelElem.dataset.active = 'N'
         setTimeout(() => {
           if (panelElem.dataset.active !== 'Y') {
-            this.showPanel = false
+            this.visiblePanel = false
             setTimeout(() => {
               if (panelElem.dataset.active !== 'Y') {
                 this.animatVisible = false
@@ -331,8 +370,9 @@ export default {
         }, 100)
       } else {
         this.animatVisible = false
-        this.showPanel = false
+        this.visiblePanel = false
       }
+      return this.$nextTick()
     },
     updatePlacement () {
       return this.$nextTick().then(() => {

package/packages/custom/src/panel.js

@@ -589,18 +589,6 @@ export default {
     getStoreData () {
       return {}
     },
-    handleSaveStore (type) {
-      const { $xetable } = this
-      const { id, customOpts } = $xetable
-      const { storage, updateStore } = customOpts
-      if (storage && id && updateStore) {
-        updateStore({
-          id,
-          type,
-          storeData: $xetable.getCustomStoreData()
-        })
-      }
-    },
     confirmCustomEvent  (evnt) {
       const { $xetable } = this
       const { customOpts, customColumnList } = $xetable
@@ -629,7 +617,7 @@ export default {
       })
       $xetable.closeCustom()
       $xetable.emitCustomEvent('confirm', evnt)
-      this.handleSaveStore('confirm')
+      $xetable.saveCustomStore('confirm')
     },
     cancelCustomEvent  (evnt) {
       const { $xetable } = this
@@ -663,7 +651,6 @@ export default {
       $xetable.resetColumn(true)
       $xetable.closeCustom()
       $xetable.emitCustomEvent('reset', evnt)
-      this.handleSaveStore('reset')
     },
     resetCustomEvent  (evnt) {
       if (VXETable.modal) {
@@ -719,6 +706,7 @@ export default {
       this.handleOptionCheck(column)
       if (customOpts.immediate) {
         $xetable.handleCustom()
+        $xetable.saveCustomStore('update:visible')
       }
       $xetable.checkCustomStatus()
     },

package/packages/table/src/columnInfo.js

@@ -127,7 +127,7 @@ export class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
-      resizeWidth: 0,
+      resizeWidth: 0, // 手动调整
 
       renderLeft: 0,
       renderArgs: [], // 渲染参数可用于扩展

package/packages/table/src/header.js

@@ -280,7 +280,7 @@ export default {
         $xetable._lastResizeTime = Date.now()
         $xetable.analyColumnWidth()
         $xetable.recalculate(true).then(() => {
-          $xetable.saveCustomResizable()
+          $xetable.saveCustomStore('update:visible')
           $xetable.updateCellAreas()
           $xetable.emitEvent('resizable-change', { ...params, resizeWidth }, evnt)
         })