重构 4.0 next 版本

2025-12-28 09:28:00 +08:00 · 2020-12-21 19:18:26 +08:00
parent 1ad8c079fb
commit 006cb6967f
13 changed files with 51 additions and 29 deletions
--- a/examples/api/modal.ts
+++ b/examples/api/modal.ts
@@ -178,6 +178,15 @@ const apis = [
        defVal: 'false',
        list: []
      },
+      {
+        name: 'show-zoom',
+        descKey: 'app.api.modal.desc.showZoom',
+        version: '',
+        type: 'Boolean',
+        enum: '',
+        defVal: 'false',
+        list: []
+      },
      {
        name: 'resize',
        descKey: 'app.api.modal.desc.resize',
--- a/examples/i18n/lang/en-US.ts
+++ b/examples/i18n/lang/en-US.ts
@@ -657,6 +657,7 @@ export default {
          mask: 'Whether to display the mask layer',
          maskClosable: 'Click the mask layer to close the modal',
          escClosable: 'Whether Esc key is allowed to close the modal',
+          showZoom: 'Allow Windows to be maximized and restored',
          resize: 'Allow drag to resize modal window',
          duration: 'Only valid for type=message, auto-closed delay, if -1 is disabled automatically closed',
          size: 'Size',
--- a/examples/i18n/lang/zh-CN.ts
+++ b/examples/i18n/lang/zh-CN.ts
@@ -656,6 +656,7 @@ export default {
          mask: '是否显示遮罩层',
          maskClosable: '是否允许点击遮罩层关闭窗口',
          escClosable: '是否允许按 Esc 键关闭窗口',
+          showZoom: '是否允许窗口最大化与还原',
          resize: '是否允许拖动调整窗口大小',
          duration: '只对 type=message 有效，自动关闭的延时，如果为 -1 禁用自动关闭',
          size: '尺寸',
--- a/examples/i18n/lang/zh-TC.ts
+++ b/examples/i18n/lang/zh-TC.ts
@@ -656,6 +656,7 @@ export default {
          mask: '是否显示遮罩层',
          maskClosable: '是否允许点击遮罩层关闭窗口',
          escClosable: '是否允许按 Esc 键关闭窗口',
+          showZoom: '是否允许窗口最大化与还原',
          resize: '是否允许拖动调整窗口大小',
          duration: '只对 type=message 有效，自动关闭的延时，如果为 -1 禁用自动关闭',
          size: '尺寸',
--- a/examples/views/modal/Modal.vue
+++ b/examples/views/modal/Modal.vue
@@ -122,7 +122,7 @@
      </vxe-modal>

      <vxe-button @click="demo1.value7 = true">拖动窗口调整大小</vxe-button>
-      <vxe-modal v-model="demo1.value7" resize>
+      <vxe-modal v-model="demo1.value7" show-zoom resize>
        <template #default>
          <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
          <div style="color: blue">按住左边距拖动！！！！！！！！！！！！！！！</div>
@@ -134,7 +134,7 @@
      </vxe-modal>

      <vxe-button @click="demo1.value8 = true">记忆功能的窗口</vxe-button>
-      <vxe-modal v-model="demo1.value8" title="记忆功能的窗口" width="600" height="400" resize remember>
+      <vxe-modal v-model="demo1.value8" title="记忆功能的窗口" width="600" height="400" show-zoom resize remember>
        <template #default>
          <vxe-form :data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="60">
            <vxe-form-item title="基本信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
@@ -155,7 +155,7 @@
      </vxe-modal>

      <vxe-button @click="demo1.value9 = true">最大化显示</vxe-button>
-      <vxe-modal v-model="demo1.value9" title="最大化显示" width="600" height="400" resize remember fullscreen>
+      <vxe-modal v-model="demo1.value9" title="最大化显示" width="600" height="400" show-zoom resize remember fullscreen>
        <template #default>
          <div style="color: red">默认最大化显示</div>
          <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
@@ -168,7 +168,7 @@
      </vxe-modal>

      <vxe-button @click="demo1.value10 = true">阻止关闭</vxe-button>
-      <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" resize>
+      <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" show-zoom resize>
        <template #default>
          <vxe-table
            border
@@ -187,7 +187,7 @@
      </vxe-modal>

      <vxe-button @click="demo1.value11 = true">完整功能的窗口（移动、拖动、状态保存）</vxe-button>
-      <vxe-modal v-model="demo1.value11" id="myModal6" width="800" height="400" min-width="460" min-height="320" resize remember storage transfer>
+      <vxe-modal v-model="demo1.value11" id="myModal6" width="800" height="400" min-width="460" min-height="320" show-zoom resize remember storage transfer>
        <template #title>
          <span style="color: red;">完整功能的窗口（移动、拖动、状态保存）</span>
          <span style="color: red;">通过设置 transfer 将弹框容器插入 body</span>
@@ -426,7 +426,7 @@ export default defineComponent({
          </vxe-modal>

          <vxe-button @click="demo1.value7 = true">拖动窗口调整大小</vxe-button>
-          <vxe-modal v-model="demo1.value7" resize>
+          <vxe-modal v-model="demo1.value7" show-zoom resize>
            <template #default>
              <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
              <div style="color: blue">按住左边距拖动！！！！！！！！！！！！！！！</div>
@@ -438,7 +438,7 @@ export default defineComponent({
          </vxe-modal>

          <vxe-button @click="demo1.value8 = true">记忆功能的窗口</vxe-button>
-          <vxe-modal v-model="demo1.value8" title="记忆功能的窗口" width="600" height="400" resize remember>
+          <vxe-modal v-model="demo1.value8" title="记忆功能的窗口" width="600" height="400" show-zoom resize remember>
            <template #default>
              <vxe-form :data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="60">
                <vxe-form-item title="基本信息" span="24" title-align="left" title-width="200px" :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
@@ -459,7 +459,7 @@ export default defineComponent({
          </vxe-modal>

          <vxe-button @click="demo1.value9 = true">最大化显示</vxe-button>
-          <vxe-modal v-model="demo1.value9" title="最大化显示" width="600" height="400" resize remember fullscreen>
+          <vxe-modal v-model="demo1.value9" title="最大化显示" width="600" height="400" show-zoom resize remember fullscreen>
            <template #default>
              <div style="color: red">默认最大化显示</div>
              <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
@@ -472,7 +472,7 @@ export default defineComponent({
          </vxe-modal>

          <vxe-button @click="demo1.value10 = true">阻止关闭</vxe-button>
-          <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" resize>
+          <vxe-modal v-model="demo1.value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod" show-zoom resize>
            <template #default>
              <vxe-table
                border
@@ -491,7 +491,7 @@ export default defineComponent({
          </vxe-modal>

          <vxe-button @click="demo1.value11 = true">完整功能的窗口（移动、拖动、状态保存）</vxe-button>
-          <vxe-modal v-model="demo1.value11" id="myModal6" width="800" height="400" min-width="460" min-height="320" resize remember storage transfer>
+          <vxe-modal v-model="demo1.value11" id="myModal6" width="800" height="400" min-width="460" min-height="320" show-zoom resize remember storage transfer>
            <template #title>
              <span style="color: red;">完整功能的窗口（移动、拖动、状态保存）</span>
              <span style="color: red;">通过设置 transfer 将弹框容器插入 body</span>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.5",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/packages/edit/src/hook.ts
+++ b/packages/edit/src/hook.ts
@@ -419,8 +419,9 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
        const editOpts = computeEditOpts.value
        const { mode, activeMethod } = editOpts
        const { actived } = editStore
-        const { row, column, cell } = params
+        const { row, column } = params
        const { editRender } = column
+        const cell = params.cell = (params.cell || $xetable.getCell(row, column))
        if (isEnableConf(editRender) && cell) {
          if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
            // 判断是否禁用编辑
--- a/packages/input/src/input.ts
+++ b/packages/input/src/input.ts
@@ -546,11 +546,9 @@ export default defineComponent({
      }
    }

-    const inputEvent = (evnt: Event & { type: 'input' }) => {
-      const { immediate } = props
+    const emitInputEvent = (value: any, evnt: Event) => {
      const isDatePickerType = computeIsDatePickerType.value
-      const inputElem = evnt.target as HTMLInputElement
-      const value = inputElem.value
+      const { immediate } = props
      reactData.inputValue = value
      if (immediate) {
        if (!isDatePickerType) {
@@ -560,6 +558,12 @@ export default defineComponent({
      inputMethods.dispatchEvent('input', { value }, evnt)
    }

+    const inputEvent = (evnt: Event & { type: 'input' }) => {
+      const inputElem = evnt.target as HTMLInputElement
+      const value = inputElem.value
+      emitInputEvent(value, evnt)
+    }
+
    const changeEvent = (evnt: Event & { type: 'change' }) => {
      const { immediate } = props
      if (immediate) {
@@ -804,13 +808,15 @@ export default defineComponent({
      const stepValue = computeStepValue.value
      const numValue = type === 'integer' ? XEUtils.toInteger(inputValue) : XEUtils.toNumber(inputValue)
      const newValue = isPlus ? XEUtils.add(numValue, stepValue) : XEUtils.subtract(numValue, stepValue)
+      let restNum: number | string
      if (!vaildMinNum(newValue)) {
-        emitUpdate(getNumberValue(min), evnt)
+        restNum = min
      } else if (!vaildMaxNum(newValue)) {
-        emitUpdate(getNumberValue(max), evnt)
+        restNum = max
      } else {
-        emitUpdate(getNumberValue(newValue), evnt)
+        restNum = newValue
      }
+      emitInputEvent(getNumberValue(restNum), evnt as (Event & { type: 'input' }))
    }

    let downbumTimeout: number
--- a/packages/list/src/list.ts
+++ b/packages/list/src/list.ts
@@ -150,7 +150,7 @@ export default defineComponent({
        scrollBodyElem.scrollTop = 0
      }
      return new Promise(resolve => {
-        requestAnimationFrame(() => {
+        setTimeout(() => {
          resolve(nextTick())
        })
      })
--- a/packages/modal/src/modal.ts
+++ b/packages/modal/src/modal.ts
@@ -36,6 +36,7 @@ export default defineComponent({
    resize: Boolean as PropType<VxeModalPropTypes.Resize>,
    showHeader: { type: Boolean as PropType<VxeModalPropTypes.ShowHeader>, default: true },
    showFooter: Boolean as PropType<VxeModalPropTypes.ShowFooter>,
+    showZoom: Boolean as PropType<VxeModalPropTypes.ShowZoom>,
    dblclickZoom: { type: Boolean as PropType<VxeModalPropTypes.DblclickZoom>, default: () => GlobalConfig.modal.dblclickZoom },
    width: [Number, String] as PropType<VxeModalPropTypes.Width>,
    height: [Number, String] as PropType<VxeModalPropTypes.Height>,
@@ -291,7 +292,7 @@ export default defineComponent({

    const maximize = () => {
      return nextTick().then(() => {
-        if (props.resize && !reactData.zoomLocat) {
+        if (props.showZoom && !reactData.zoomLocat) {
          const marginSize = XEUtils.toNumber(props.marginSize)
          const boxElem = getBox()
          const { visibleHeight, visibleWidth } = DomTools.getDomNode()
@@ -666,7 +667,7 @@ export default defineComponent({
    }

    const renderTitles = () => {
-      const { slots: propSlots = {}, resize, title } = props
+      const { slots: propSlots = {}, showZoom, title } = props
      const { zoomLocat } = reactData
      const titleSlot = slots.title || propSlots.title
      const titVNs: any[] = titleSlot ? titleSlot({ $modal: $xemodal }) : [
@@ -674,7 +675,7 @@ export default defineComponent({
          class: 'vxe-modal--title'
        }, title ? UtilTools.getFuncText(title) : GlobalConfig.i18n('vxe.alert.title'))
      ]
-      if (resize) {
+      if (showZoom) {
        titVNs.push(
          h('i', {
            class: ['vxe-modal--zoom-btn', 'trigger--btn', zoomLocat ? GlobalConfig.icon.MODAL_ZOOM_OUT : GlobalConfig.icon.MODAL_ZOOM_IN],
@@ -694,13 +695,13 @@ export default defineComponent({
    }

    const renderHeaders = () => {
-      const { slots: propSlots = {}, resize } = props
+      const { slots: propSlots = {}, showZoom } = props
      const isMsg = computeIsMsg.value
      const headerSlot = slots.header || propSlots.header
      const headVNs: any[] = []
      if (props.showHeader) {
        const headerOns: any = {}
-        if (resize && props.dblclickZoom && props.type === 'modal') {
+        if (showZoom && props.dblclickZoom && props.type === 'modal') {
          headerOns.onDblclick = toggleZoomEvent
        }
        headVNs.push(
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -1742,7 +1742,7 @@ export default defineComponent({
      handleDefaultTreeExpand()
      handleDefaultMergeCells()
      handleDefaultMergeFooterItems()
-      nextTick(() => requestAnimationFrame(() => tableMethods.recalculate()))
+      nextTick(() => setTimeout(() => tableMethods.recalculate()))
    }

    const handleTableColumn = () => {
@@ -3484,7 +3484,7 @@ export default defineComponent({
                      // 如果点击了当前表格之外
                      !getEventTargetNode(evnt, el).flag
                  ) {
-                    requestAnimationFrame(() => $xetable.clearActived(evnt))
+                    setTimeout(() => $xetable.clearActived(evnt))
                  }
                })
              }
@@ -4708,7 +4708,6 @@ export default defineComponent({
          const { fullAllDataRowMap } = internalData
          const colid = column.id
          const cacheFormat = fullAllDataRowMap.has(row)
-          const formatParams = { cellValue, row, column }
          if (cacheFormat) {
            rest = fullAllDataRowMap.get(row)
            formatData = rest.formatData
@@ -4721,6 +4720,7 @@ export default defineComponent({
              }
            }
          }
+          const formatParams = { cellValue, row, rowIndex: tableMethods.getRowIndex(row), column, columnIndex: tableMethods.getColumnIndex(column) }
          if (XEUtils.isString(formatter)) {
            const globalFunc = formats.get(formatter)
            cellLabel = globalFunc ? globalFunc(formatParams) : ''
--- a/packages/tools/src/resize.ts
+++ b/packages/tools/src/resize.ts
@@ -21,7 +21,7 @@ function eventHandle () {
        if (rWidth || rHeight) {
          observer.width = clientWidth
          observer.heighe = clientHeight
-          requestAnimationFrame(item.callback)
+          setTimeout(item.callback)
        }
      })
    })
--- a/types/modal.d.ts
+++ b/types/modal.d.ts
@@ -128,6 +128,7 @@ export namespace VxeModalPropTypes {
  export type Resize = boolean;
  export type ShowHeader = boolean;
  export type ShowFooter = boolean;
+  export type ShowZoom = boolean;
  export type DblclickZoom = boolean;
  export type Width = number | string;
  export type Height = number | string;
@@ -171,6 +172,7 @@ export interface VxeModalProps {
  resize?: VxeModalPropTypes.Resize;
  showHeader?: VxeModalPropTypes.ShowHeader;
  showFooter?: VxeModalPropTypes.ShowFooter;
+  showZoom?: VxeModalPropTypes.ShowZoom;
  dblclickZoom?: VxeModalPropTypes.DblclickZoom;
  width?: VxeModalPropTypes.Width;
  height?: VxeModalPropTypes.Height;