releases 4.0.30

examples/views/button/ButtonTest.vue

@@ -143,6 +143,25 @@
       </vxe-button>
     </p>
 
+    <p>
+      <vxe-button status="danger" transfer trigger="manual">
+        <template #default>手动</template>
+        <template #dropdowns>
+          <vxe-button mode="text" content="下拉按钮1"></vxe-button>
+          <vxe-button mode="text" content="下拉按钮2" status="danger"></vxe-button>
+          <vxe-button mode="text" content="下拉按钮3"></vxe-button>
+        </template>
+      </vxe-button>
+      <vxe-button status="danger" transfer trigger="click">
+        <template #default>点击</template>
+        <template #dropdowns>
+          <vxe-button mode="text" content="下拉按钮1"></vxe-button>
+          <vxe-button mode="text" content="下拉按钮2" status="danger"></vxe-button>
+          <vxe-button mode="text" content="下拉按钮3"></vxe-button>
+        </template>
+      </vxe-button>
+    </p>
+
     <p>
       <vxe-button icon="fa fa-plus" content="使用第三方图标"></vxe-button>
       <vxe-button status="primary" content="主要图标颜色" icon="fa fa-save"></vxe-button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.28",
+  "version": "4.0.30",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/button/src/button.ts

@@ -61,6 +61,7 @@ export default defineComponent({
      * 是否加载中
      */
     loading: Boolean as PropType<VxeButtonPropTypes.Loading>,
+    trigger: { type: String as PropType<VxeButtonPropTypes.Trigger>, default: () => getConfig().button.trigger },
     /**
      * 在下拉面板关闭时销毁内容
      */
@@ -91,8 +92,9 @@ export default defineComponent({
 
     const reactData = reactive<ButtonReactData>({
       inited: false,
-      showPanel: false,
+      visiblePanel: false,
       animatVisible: false,
+      isActivated: false,
       panelIndex: 0,
       panelStyle: {},
       panelPlacement: ''
@@ -285,7 +287,7 @@ export default defineComponent({
         if (panelElem) {
           panelElem.dataset.active = 'N'
         }
-        reactData.showPanel = false
+        reactData.visiblePanel = false
         setTimeout(() => {
           if (!panelElem || panelElem.dataset.active !== 'Y') {
             reactData.animatVisible = false
@@ -302,11 +304,11 @@ export default defineComponent({
         reactData.animatVisible = true
         setTimeout(() => {
           if (panelElem.dataset.active === 'Y') {
-            reactData.showPanel = true
+            reactData.visiblePanel = true
             updateZindex()
             updatePlacement()
             setTimeout(() => {
-              if (reactData.showPanel) {
+              if (reactData.visiblePanel) {
                 updatePlacement()
               }
             }, 50)
@@ -316,20 +318,7 @@ export default defineComponent({
     }
 
     const mouseenterTargetEvent = (evnt: MouseEvent) => {
-      const panelElem = refBtnPanel.value
-      if (panelElem) {
-        panelElem.dataset.active = 'Y'
-        if (!reactData.inited) {
-          reactData.inited = true
-        }
-        internalData.showTime = setTimeout(() => {
-          if (panelElem.dataset.active === 'Y') {
-            mouseenterDropdownEvent()
-          } else {
-            reactData.animatVisible = false
-          }
-        }, 250)
-      }
+      openPanel()
       mouseenterEvent(evnt)
     }
 
@@ -346,14 +335,45 @@ export default defineComponent({
       emit('mouseleave', createEvent(evnt, {}))
     }
 
+    const clickTargetEvent = (evnt: MouseEvent) => {
+      const { trigger } = props
+      if (trigger === 'click') {
+        if (reactData.visiblePanel) {
+          closePanel()
+        } else {
+          openPanel()
+        }
+      }
+      clickEvent(evnt)
+    }
+
+    const openPanel = () => {
+      const { trigger } = props
+      const panelElem = refBtnPanel.value
+      if (panelElem) {
+        panelElem.dataset.active = 'Y'
+        if (!reactData.inited) {
+          reactData.inited = true
+        }
+        internalData.showTime = setTimeout(() => {
+          if (panelElem.dataset.active === 'Y') {
+            mouseenterDropdownEvent()
+          } else {
+            reactData.animatVisible = false
+          }
+        }, trigger === 'click' ? 50 : 250)
+      }
+      return nextTick()
+    }
+
     const closePanel = () => {
       const panelElem = refBtnPanel.value
       clearTimeout(internalData.showTime)
       if (panelElem) {
         panelElem.dataset.active = 'N'
         setTimeout(() => {
           if (panelElem.dataset.active !== 'Y') {
-            reactData.showPanel = false
+            reactData.visiblePanel = false
             setTimeout(() => {
               if (panelElem.dataset.active !== 'Y') {
                 reactData.animatVisible = false
@@ -363,8 +383,9 @@ export default defineComponent({
         }, 100)
       } else {
         reactData.animatVisible = false
-        reactData.showPanel = false
+        reactData.visiblePanel = false
       }
+      return nextTick()
     }
 
     const mouseleaveDropdownEvent = () => {
@@ -413,6 +434,8 @@ export default defineComponent({
       dispatchEvent (type, params, evnt) {
         emit(type, createEvent(evnt, { $button: $xeButton }, params))
       },
+      openPanel,
+      closePanel,
       focus () {
         const btnElem = refButton.value
         btnElem.focus()
@@ -425,30 +448,24 @@ export default defineComponent({
       }
     }
 
-    Object.assign($xeButton, buttonMethods)
-
-    onMounted(() => {
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (props.type === 'text') {
-          warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
-        }
-      }
-
-      globalEvents.on($xeButton, 'mousewheel', (evnt: Event) => {
+    const handleGlobalMousedownEvent = (evnt: MouseEvent) => {
+      const { disabled } = props
+      const { visiblePanel } = reactData
+      if (!disabled) {
+        const el = refElem.value
         const panelElem = refBtnPanel.value
-        if (reactData.showPanel && !getEventTargetNode(evnt, panelElem).flag) {
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        if (visiblePanel && !reactData.isActivated) {
           closePanel()
         }
-      })
-    })
+      }
+    }
 
-    onUnmounted(() => {
-      globalEvents.off($xeButton, 'mousewheel')
-    })
+    Object.assign($xeButton, buttonMethods)
 
     const renderVN = () => {
-      const { className, popupClassName, title, type, destroyOnClose, name, disabled, loading } = props
-      const { inited, showPanel } = reactData
+      const { className, popupClassName, trigger, title, type, destroyOnClose, name, disabled, loading } = props
+      const { inited, visiblePanel } = reactData
       const isFormBtn = computeIsFormBtn.value
       const btnMode = computeBtnMode.value
       const btnStatus = computeBtnStatus.value
@@ -457,11 +474,21 @@ export default defineComponent({
       const transfer = compTransfer.value
       const vSize = computeSize.value
       if (slots.dropdowns) {
+        const btnOns: Record<string, any> = {}
+        const panelOns: Record<string, any> = {}
+        if (trigger === 'hover') {
+          // hover 触发
+          btnOns.onMouseenter = mouseenterTargetEvent
+          btnOns.onMouseleave = mouseleaveTargetEvent
+
+          panelOns.onMouseenter = mouseenterDropdownEvent
+          panelOns.onMouseleave = mouseleaveDropdownEvent
+        }
         return h('div', {
           ref: refElem,
           class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
             [`size--${vSize}`]: vSize,
-            'is--active': showPanel
+            'is--active': visiblePanel
           }]
         }, [
           h('button', {
@@ -478,9 +505,8 @@ export default defineComponent({
             name,
             type: isFormBtn ? type : 'button',
             disabled: disabled || loading,
-            onMouseenter: mouseenterTargetEvent,
-            onMouseleave: mouseleaveTargetEvent,
-            onClick: clickEvent
+            onClick: clickTargetEvent,
+            ...btnOns
           }, renderContent().concat([
             h('i', {
               class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
@@ -495,7 +521,7 @@ export default defineComponent({
               class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xeButton }) : popupClassName) : '', {
                 [`size--${vSize}`]: vSize,
                 'animat--leave': reactData.animatVisible,
-                'animat--enter': showPanel
+                'animat--enter': visiblePanel
               }],
               placement: reactData.panelPlacement,
               style: reactData.panelStyle
@@ -505,9 +531,8 @@ export default defineComponent({
                     class: 'vxe-button--dropdown-wrapper',
                     onMousedown: mousedownDropdownEvent,
                     onClick: clickDropdownEvent,
-                    onMouseenter: mouseenterDropdownEvent,
-                    onMouseleave: mouseleaveDropdownEvent
-                  }, destroyOnClose && !showPanel ? [] : slots.dropdowns({}))
+                    ...panelOns
+                  }, destroyOnClose && !visiblePanel ? [] : slots.dropdowns({}))
                 ]
               : [])
           ])
@@ -535,6 +560,27 @@ export default defineComponent({
 
     $xeButton.renderVN = renderVN
 
+    onMounted(() => {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
+        if (props.type === 'text') {
+          warnLog('vxe.error.delProp', ['type=text', 'mode=text'])
+        }
+      }
+
+      globalEvents.on($xeButton, 'mousewheel', (evnt: Event) => {
+        const panelElem = refBtnPanel.value
+        if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
+          closePanel()
+        }
+      })
+      globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent)
+    })
+
+    onUnmounted(() => {
+      globalEvents.off($xeButton, 'mousewheel')
+      globalEvents.off($xeButton, 'mousedown')
+    })
+
     return $xeButton
   },
   render () {

packages/form-design/src/form-view.ts

@@ -109,10 +109,11 @@ export default defineComponent({
       XEUtils.eachTree(reactData.widgetObjList, widget => {
         const { name, field, required } = widget
         const compConf = renderer.get(name) || {}
-        const createWidgetViewRules = compConf.createFormDesignWidgetRules
-        formData[field] = getWidgetDefaultValue(widget)
-        if (createWidgetViewRules) {
-          const rules = createWidgetViewRules({ widget })
+        const createWidgetFieldValue = compConf.createFormDesignWidgetFieldValue
+        const createWidgetFieldRules = compConf.createFormDesignWidgetFieldRules
+        formData[field] = createWidgetFieldValue ? createWidgetFieldValue({ widget, $formView: $xeFormView }) : getWidgetDefaultValue(widget)
+        if (createWidgetFieldRules) {
+          const rules = createWidgetFieldRules({ widget, $formView: $xeFormView })
           if (rules && rules.length) {
             formRules[field] = rules
           }

packages/ui/index.ts

@@ -43,7 +43,9 @@ setConfig({
     separator: '/'
   },
   breadcrumbItem: {},
-  button: {},
+  button: {
+    trigger: 'hover'
+  },
   buttonGroup: {},
   card: {
     border: true,

types/components/button.d.ts

@@ -39,6 +39,7 @@ export namespace VxeButtonPropTypes {
   export type Circle = boolean
   export type Disabled = boolean
   export type Loading = boolean
+  export type Trigger = 'manual' | 'hover' | 'click' | '' | null
   export type DestroyOnClose = boolean
   export type Transfer = boolean
 }
@@ -92,6 +93,7 @@ export type VxeButtonProps = {
    * 是否加载中
    */
   loading?: VxeButtonPropTypes.Loading
+  trigger?: VxeButtonPropTypes.Trigger
   /**
    * 在下拉面板关闭时销毁内容
    */
@@ -108,8 +110,9 @@ export interface VxeButtonPrivateComputed extends ButtonPrivateComputed { }
 
 export interface ButtonReactData {
   inited: boolean
-  showPanel: boolean
+  visiblePanel: boolean
   animatVisible: boolean
+  isActivated: boolean
   panelIndex: number
   panelStyle: VxeComponentStyleType
   panelPlacement: any
@@ -121,6 +124,8 @@ export interface ButtonInternalData {
 
 export interface ButtonMethods {
   dispatchEvent(type: ValueOf<VxeButtonEmits>, params: Record<string, any>, evnt: Event | null): void
+  openPanel(): Promise<any>
+  closePanel(): Promise<any>
   /**
    * 获取焦点
    */

types/components/table.d.ts

@@ -359,7 +359,7 @@ export namespace VxeTablePropTypes {
       minHeight?: VxeModalPropTypes.MinHeight
       className?: VxeModalPropTypes.ClassName
     }
-    trigger?: string,
+    trigger?: 'manual' | 'hover' | 'click' | '' | null
     immediate?: boolean
     placement?: 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
     /**
@@ -2421,6 +2421,10 @@ export interface TableMethods<DT = any> {
    * @param field 指定字段名
    */
   reloadRow(rows: any | any[], record?: any, field?: string): Promise<void>
+  /**
+   * 获取自定义的 params 属性
+   */
+  getParams (): any
   /**
    * 用于树结构，给行数据加载子节点
    * @param row 行对象