vxe-table 3.8.24 → 3.9.0-rc.0

package/packages/modal/src/modal.js

@@ -1,822 +0,0 @@
-import GlobalConfig from '../../v-x-e-table/src/conf'
-import vSize from '../../mixins/size'
-import XEUtils from 'xe-utils'
-import UtilTools, { getFuncText } from '../../tools/utils'
-import DomTools from '../../tools/dom'
-import { GlobalEvent } from '../../tools/event'
-import { errLog } from '../../tools/log'
-import { getSlotVNs } from '../../tools/vn'
-import VxeLoading from '../../loading/index'
-
-export const allActivedModals = []
-export const msgQueue = []
-
-export default {
-  name: 'VxeModal',
-  mixins: [vSize],
-  props: {
-    value: Boolean,
-    id: String,
-    type: { type: String, default: 'modal' },
-    loading: { type: Boolean, default: null },
-    status: String,
-    iconStatus: String,
-    className: String,
-    top: { type: [Number, String], default: () => GlobalConfig.modal.top },
-    position: [String, Object],
-    title: String,
-    duration: { type: [Number, String], default: () => GlobalConfig.modal.duration },
-    // 请使用 content
-    message: [String, Function],
-    content: [String, Function],
-    showCancelButton: { type: Boolean, default: null },
-    cancelButtonText: { type: String, default: () => GlobalConfig.modal.cancelButtonText },
-    showConfirmButton: { type: Boolean, default: () => GlobalConfig.modal.showConfirmButton },
-    confirmButtonText: { type: String, default: () => GlobalConfig.modal.confirmButtonText },
-    lockView: { type: Boolean, default: () => GlobalConfig.modal.lockView },
-    lockScroll: Boolean,
-    mask: { type: Boolean, default: () => GlobalConfig.modal.mask },
-    maskClosable: { type: Boolean, default: () => GlobalConfig.modal.maskClosable },
-    escClosable: { type: Boolean, default: () => GlobalConfig.modal.escClosable },
-    resize: { type: Boolean, default: () => GlobalConfig.modal.resize },
-    showHeader: { type: Boolean, default: () => GlobalConfig.modal.showHeader },
-    showFooter: { type: Boolean, default: () => GlobalConfig.modal.showFooter },
-    showZoom: { type: Boolean, default: null },
-    showClose: { type: Boolean, default: () => GlobalConfig.modal.showClose },
-    dblclickZoom: { type: Boolean, default: () => GlobalConfig.modal.dblclickZoom },
-    width: [Number, String],
-    height: [Number, String],
-    minWidth: { type: [Number, String], default: () => GlobalConfig.modal.minWidth },
-    minHeight: { type: [Number, String], default: () => GlobalConfig.modal.minHeight },
-    zIndex: Number,
-    marginSize: { type: [Number, String], default: () => GlobalConfig.modal.marginSize },
-    fullscreen: Boolean,
-    draggable: { type: Boolean, default: () => GlobalConfig.modal.draggable },
-    remember: { type: Boolean, default: () => GlobalConfig.modal.remember },
-    destroyOnClose: { type: Boolean, default: () => GlobalConfig.modal.destroyOnClose },
-    showTitleOverflow: { type: Boolean, default: () => GlobalConfig.modal.showTitleOverflow },
-    transfer: { type: Boolean, default: () => GlobalConfig.modal.transfer },
-    storage: { type: Boolean, default: () => GlobalConfig.modal.storage },
-    storageKey: { type: String, default: () => GlobalConfig.modal.storageKey },
-    animat: { type: Boolean, default: () => GlobalConfig.modal.animat },
-    size: { type: String, default: () => GlobalConfig.modal.size || GlobalConfig.size },
-    beforeHideMethod: { type: Function, default: () => GlobalConfig.modal.beforeHideMethod },
-    slots: Object,
-    events: Object
-  },
-  data () {
-    return {
-      initialized: false,
-      visible: false,
-      contentVisible: false,
-      modalTop: 0,
-      modalZindex: 0,
-      revertLocat: null,
-      firstOpen: true
-    }
-  },
-  computed: {
-    isMsg () {
-      return this.type === 'message'
-    }
-  },
-  watch: {
-    width () {
-      this.recalculate()
-    },
-    height () {
-      this.recalculate()
-    },
-    value (visible) {
-      this[visible ? 'open' : 'close']('model')
-    }
-  },
-  created () {
-    if (this.storage && !this.id) {
-      errLog('vxe.error.reqProp', ['modal.id'])
-    }
-  },
-  mounted () {
-    const { $listeners, events = {} } = this
-    if (this.value) {
-      this.open()
-    }
-    this.recalculate()
-    if (this.escClosable) {
-      GlobalEvent.on(this, 'keydown', this.handleGlobalKeydownEvent)
-    }
-    // 触发 inserted 事件
-    const type = 'inserted'
-    const params = { type, $modal: this, $event: { type } }
-    if ($listeners.inserted) {
-      this.$emit('inserted', params)
-    } else if (events.inserted) {
-      events.inserted.call(this, params)
-    }
-  },
-  beforeDestroy () {
-    const { $el } = this
-    GlobalEvent.off(this, 'keydown')
-    this.removeMsgQueue()
-    if ($el.parentNode === document.body) {
-      $el.parentNode.removeChild($el)
-    }
-  },
-  render (h) {
-    const { _e, $scopedSlots, slots = {}, initialized, vSize, className, type, resize, showClose, showZoom, animat, draggable, loading, status, iconStatus, showFooter, revertLocat, modalTop, dblclickZoom, contentVisible, visible, title, lockScroll, lockView, mask, isMsg, showTitleOverflow, destroyOnClose, showCancelButton, showConfirmButton } = this
-    const content = this.content || this.message
-    const defaultSlot = $scopedSlots.default || slots.default
-    const footerSlot = $scopedSlots.footer || slots.footer
-    const headerSlot = $scopedSlots.header || slots.header
-    const titleSlot = $scopedSlots.title || slots.title
-    const cornerSlot = $scopedSlots.corner || slots.corner
-    const headerOns = {}
-    if (draggable) {
-      headerOns.mousedown = this.mousedownEvent
-    }
-    if (showZoom && dblclickZoom && type === 'modal') {
-      headerOns.dblclick = this.toggleZoomEvent
-    }
-    return h('div', {
-      class: ['vxe-modal--wrapper', `type--${type}`, className || '', {
-        [`size--${vSize}`]: vSize,
-        [`status--${status}`]: status,
-        'is--animat': animat,
-        'lock--scroll': lockScroll,
-        'lock--view': lockView,
-        'is--resize': resize,
-        'is--mask': mask,
-        'is--maximize': revertLocat,
-        'is--visible': contentVisible,
-        'is--active': visible,
-        'is--loading': loading
-      }],
-      style: {
-        zIndex: this.modalZindex,
-        top: modalTop ? `${modalTop}px` : null
-      },
-      on: {
-        click: this.selfClickEvent
-      }
-    }, [
-      h('div', {
-        class: 'vxe-modal--box',
-        on: {
-          mousedown: this.boxMousedownEvent
-        },
-        ref: 'modalBox'
-      }, [
-        this.showHeader ? h('div', {
-          class: ['vxe-modal--header', {
-            'is--draggable': draggable,
-            'is--ellipsis': !isMsg && showTitleOverflow
-          }],
-          on: headerOns
-        }, headerSlot ? (!initialized || (destroyOnClose && !visible) ? [] : getSlotVNs(headerSlot.call(this, { $modal: this }, h))) : [
-          h('div', {
-            class: 'vxe-modal--header-title'
-          }, titleSlot ? getSlotVNs(titleSlot.call(this, { $modal: this }, h)) : (title ? getFuncText(title) : GlobalConfig.i18n('vxe.alert.title'))),
-          h('div', {
-            class: 'vxe-modal--header-right'
-          }, [
-            cornerSlot ? h('span', {
-              class: 'vxe-modal--corner-wrapper'
-            }, getSlotVNs(cornerSlot({ $modal: this }))) : _e(),
-            showZoom ? h('i', {
-              class: ['vxe-modal--zoom-btn', 'trigger--btn', revertLocat ? GlobalConfig.icon.MODAL_ZOOM_OUT : GlobalConfig.icon.MODAL_ZOOM_IN],
-              attrs: {
-                title: GlobalConfig.i18n(`vxe.modal.zoom${revertLocat ? 'Out' : 'In'}`)
-              },
-              on: {
-                click: this.toggleZoomEvent
-              }
-            }) : _e(),
-            showClose ? h('i', {
-              class: ['vxe-modal--close-btn', 'trigger--btn', GlobalConfig.icon.MODAL_CLOSE],
-              attrs: {
-                title: GlobalConfig.i18n('vxe.modal.close')
-              },
-              on: {
-                click: this.closeEvent
-              }
-            }) : _e()
-          ])
-        ]) : null,
-        h('div', {
-          class: 'vxe-modal--body'
-        }, [
-          status ? h('div', {
-            class: 'vxe-modal--status-wrapper'
-          }, [
-            h('i', {
-              class: ['vxe-modal--status-icon', iconStatus || GlobalConfig.icon[`MODAL_${status}`.toLocaleUpperCase()]]
-            })
-          ]) : null,
-          h('div', {
-            class: 'vxe-modal--content'
-          }, defaultSlot ? (!initialized || (destroyOnClose && !visible) ? [] : getSlotVNs(defaultSlot.call(this, { $modal: this }, h))) : getFuncText(content)),
-          /**
-           * 加载中
-           */
-          !isMsg ? h(VxeLoading, {
-            class: 'vxe-modal--loading',
-            props: {
-              value: loading
-            }
-          }) : null
-        ]),
-        showFooter ? h('div', {
-          class: 'vxe-modal--footer'
-        }, footerSlot ? (!initialized || (destroyOnClose && !visible) ? [] : getSlotVNs(footerSlot.call(this, { $modal: this }, h))) : [
-          XEUtils.isBoolean(showCancelButton) ? showCancelButton : type === 'confirm' ? h('vxe-button', {
-            key: 1,
-            ref: 'cancelBtn',
-            on: {
-              click: this.cancelEvent
-            }
-          }, this.cancelButtonText || GlobalConfig.i18n('vxe.button.cancel')) : null,
-          XEUtils.isBoolean(showConfirmButton) ? showConfirmButton : (type === 'confirm' || type === 'alert') ? h('vxe-button', {
-            key: 2,
-            ref: 'confirmBtn',
-            props: {
-              status: 'primary'
-            },
-            on: {
-              click: this.confirmEvent
-            }
-          }, this.confirmButtonText || GlobalConfig.i18n('vxe.button.confirm')) : null
-        ]) : null,
-        !isMsg && resize ? h('span', {
-          class: 'vxe-modal--resize'
-        }, ['wl', 'wr', 'swst', 'sest', 'st', 'swlb', 'selb', 'sb'].map(type => {
-          return h('span', {
-            class: `${type}-resize`,
-            attrs: {
-              type
-            },
-            on: {
-              mousedown: this.dragEvent
-            }
-          })
-        })) : null
-      ])
-    ])
-  },
-  methods: {
-    recalculate () {
-      const { width, height } = this
-      const modalBoxElem = this.getBox()
-      modalBoxElem.style.width = width ? (isNaN(width) ? width : `${width}px`) : null
-      modalBoxElem.style.height = height ? (isNaN(height) ? height : `${height}px`) : null
-      return this.$nextTick()
-    },
-    selfClickEvent (evnt) {
-      if (this.maskClosable && evnt.target === this.$el) {
-        const type = 'mask'
-        this.close(type)
-      }
-    },
-    updateZindex () {
-      const { zIndex, modalZindex } = this
-      if (zIndex) {
-        this.modalZindex = zIndex
-      } else if (modalZindex < UtilTools.getLastZIndex()) {
-        this.modalZindex = UtilTools.nextZIndex()
-      }
-    },
-    closeEvent (evnt) {
-      const { events = {} } = this
-      const type = 'close'
-      const params = { type, $modal: this, $event: evnt }
-      if (events[type]) {
-        events[type].call(this, params)
-      } else {
-        this.$emit(type, params)
-      }
-      this.close(type)
-    },
-    confirmEvent (evnt) {
-      const { events = {} } = this
-      const type = 'confirm'
-      const params = { type, $modal: this, $event: evnt }
-      if (events[type]) {
-        events[type].call(this, params)
-      } else {
-        this.$emit(type, params)
-      }
-      this.close(type)
-    },
-    cancelEvent (evnt) {
-      const { events = {} } = this
-      const type = 'cancel'
-      const params = { type, $modal: this, $event: evnt }
-      if (events[type]) {
-        events[type].call(this, params)
-      } else {
-        this.$emit(type, params)
-      }
-      this.close(type)
-    },
-    open () {
-      const { $refs, events = {}, initialized, duration, visible, isMsg, remember, showFooter } = this
-      if (!initialized) {
-        this.initialized = true
-        if (this.transfer) {
-          document.body.appendChild(this.$el)
-        }
-      }
-      if (!visible) {
-        if (!remember) {
-          this.recalculate()
-        }
-        this.visible = true
-        this.contentVisible = false
-        this.updateZindex()
-        allActivedModals.push(this)
-        setTimeout(() => {
-          this.contentVisible = true
-          this.$nextTick(() => {
-            if (showFooter) {
-              const operBtn = $refs.confirmBtn || $refs.cancelBtn
-              if (operBtn) {
-                operBtn.focus()
-              }
-            }
-            const type = ''
-            const params = { type, $modal: this }
-            if (events.show) {
-              events.show.call(this, params)
-            } else {
-              this.$emit('input', true)
-              this.$emit('show', params)
-            }
-          })
-        }, 10)
-        if (isMsg) {
-          this.addMsgQueue()
-          if (duration !== -1) {
-            setTimeout(() => this.close('close'), XEUtils.toNumber(duration))
-          }
-        } else {
-          this.$nextTick(() => {
-            const { firstOpen, fullscreen } = this
-            if (!remember || firstOpen) {
-              this.updatePosition().then(() => {
-                setTimeout(() => this.updatePosition(), 20)
-              })
-            }
-            if (firstOpen) {
-              this.firstOpen = false
-              if (this.hasPosStorage()) {
-                this.restorePosStorage()
-              } else if (fullscreen) {
-                this.$nextTick(() => this.maximize())
-              }
-            } else {
-              if (fullscreen) {
-                this.$nextTick(() => this.maximize())
-              }
-            }
-          })
-        }
-      }
-    },
-    addMsgQueue () {
-      if (msgQueue.indexOf(this) === -1) {
-        msgQueue.push(this)
-      }
-      this.updateStyle()
-    },
-    removeMsgQueue () {
-      if (msgQueue.indexOf(this) > -1) {
-        XEUtils.remove(msgQueue, comp => comp === this)
-      }
-      this.updateStyle()
-    },
-    updateStyle () {
-      this.$nextTick(() => {
-        let offsetTop = 0
-        msgQueue.forEach(comp => {
-          offsetTop += XEUtils.toNumber(comp.top)
-          comp.modalTop = offsetTop
-          offsetTop += comp.$refs.modalBox.clientHeight
-        })
-      })
-    },
-    updatePosition () {
-      return this.$nextTick().then(() => {
-        const { marginSize, position } = this
-        const modalBoxElem = this.getBox()
-        const clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth
-        const clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const isPosCenter = position === 'center'
-        const { top, left } = isPosCenter ? { top: position, left: position } : Object.assign({}, position)
-        const topCenter = isPosCenter || top === 'center'
-        const leftCenter = isPosCenter || left === 'center'
-        let posTop = ''
-        let posLeft = ''
-        if (left && !leftCenter) {
-          posLeft = isNaN(left) ? left : `${left}px`
-        } else {
-          posLeft = `${Math.max(marginSize, clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2)}px`
-        }
-        if (top && !topCenter) {
-          posTop = isNaN(top) ? top : `${top}px`
-        } else {
-          posTop = `${Math.max(marginSize, clientVisibleHeight / 2 - modalBoxElem.offsetHeight / 2)}px`
-        }
-        modalBoxElem.style.top = posTop
-        modalBoxElem.style.left = posLeft
-      })
-    },
-    close (type) {
-      const { events = {}, remember, visible, isMsg, beforeHideMethod } = this
-      const params = { type, $modal: this }
-      if (visible) {
-        Promise.resolve(beforeHideMethod ? beforeHideMethod(params) : null).then((rest) => {
-          if (!XEUtils.isError(rest)) {
-            if (isMsg) {
-              this.removeMsgQueue()
-            }
-            this.contentVisible = false
-            if (!remember) {
-              this.revertLocat = null
-            }
-            XEUtils.remove(allActivedModals, item => item === this)
-            this.$emit('before-hide', params)
-            setTimeout(() => {
-              this.visible = false
-              if (events.hide) {
-                events.hide.call(this, params)
-              } else {
-                this.$emit('input', false)
-                this.$emit('hide', params)
-              }
-            }, 200)
-          }
-        }).catch(e => e)
-      }
-    },
-    handleGlobalKeydownEvent (evnt) {
-      const isEsc = evnt.keyCode === 27
-      if (isEsc) {
-        const lastModal = XEUtils.max(allActivedModals, item => item.modalZindex)
-        // 多个时，只关掉最上层的窗口
-        if (lastModal) {
-          setTimeout(() => {
-            if (lastModal === this && lastModal.escClosable) {
-              this.close('exit')
-            }
-          }, 10)
-        }
-      }
-    },
-    getBox () {
-      return this.$refs.modalBox
-    },
-    isMaximized () {
-      return !!this.revertLocat
-    },
-    maximize () {
-      return this.$nextTick().then(() => {
-        if (!this.revertLocat) {
-          const modalBoxElem = this.getBox()
-          this.revertLocat = {
-            top: modalBoxElem.offsetTop,
-            left: modalBoxElem.offsetLeft,
-            width: modalBoxElem.offsetWidth + (modalBoxElem.style.width ? 0 : 1),
-            height: modalBoxElem.offsetHeight + (modalBoxElem.style.height ? 0 : 1)
-          }
-          Object.assign(modalBoxElem.style, {
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%'
-          })
-          this.savePosStorage()
-        }
-      })
-    },
-    revert () {
-      return this.$nextTick().then(() => {
-        const revertLocat = this.revertLocat
-        if (revertLocat) {
-          const modalBoxElem = this.getBox()
-          this.revertLocat = null
-          Object.assign(modalBoxElem.style, {
-            top: `${revertLocat.top}px`,
-            left: `${revertLocat.left}px`,
-            width: `${revertLocat.width}px`,
-            height: `${revertLocat.height}px`
-          })
-          this.savePosStorage()
-        }
-      })
-    },
-    zoom () {
-      return this[this.revertLocat ? 'revert' : 'maximize']().then(() => this.isMaximized())
-    },
-    toggleZoomEvent (evnt) {
-      const { $listeners, revertLocat, events = {} } = this
-      const params = { type: revertLocat ? 'revert' : 'max', $modal: this, $event: evnt }
-      return this.zoom().then(() => {
-        if ($listeners.zoom) {
-          this.$emit('zoom', params)
-        } else if (events.zoom) {
-          events.zoom.call(this, params)
-        }
-      })
-    },
-    getPosition () {
-      if (!this.isMsg) {
-        const modalBoxElem = this.getBox()
-        if (modalBoxElem) {
-          return {
-            top: modalBoxElem.offsetTop,
-            left: modalBoxElem.offsetLeft
-          }
-        }
-      }
-      return null
-    },
-    setPosition (top, left) {
-      if (!this.isMsg) {
-        const modalBoxElem = this.getBox()
-        if (XEUtils.isNumber(top)) {
-          modalBoxElem.style.top = `${top}px`
-        }
-        if (XEUtils.isNumber(left)) {
-          modalBoxElem.style.left = `${left}px`
-        }
-      }
-      return this.$nextTick()
-    },
-    boxMousedownEvent () {
-      const { modalZindex } = this
-      if (allActivedModals.some(_vm => _vm.visible && _vm.modalZindex > modalZindex)) {
-        this.updateZindex()
-      }
-    },
-    mousedownEvent (evnt) {
-      const { remember, storage, marginSize, revertLocat } = this
-      const modalBoxElem = this.getBox()
-      if (!revertLocat && evnt.button === 0 && !DomTools.getEventTargetNode(evnt, modalBoxElem, 'trigger--btn').flag) {
-        evnt.preventDefault()
-        const domMousemove = document.onmousemove
-        const domMouseup = document.onmouseup
-        const disX = evnt.clientX - modalBoxElem.offsetLeft
-        const disY = evnt.clientY - modalBoxElem.offsetTop
-        const { visibleHeight, visibleWidth } = DomTools.getDomNode()
-        document.onmousemove = evnt => {
-          evnt.preventDefault()
-          const offsetWidth = modalBoxElem.offsetWidth
-          const offsetHeight = modalBoxElem.offsetHeight
-          const minX = marginSize
-          const maxX = visibleWidth - offsetWidth - marginSize - 1
-          const minY = marginSize
-          const maxY = visibleHeight - offsetHeight - marginSize - 1
-          let left = evnt.clientX - disX
-          let top = evnt.clientY - disY
-          if (left > maxX) {
-            left = maxX
-          }
-          if (left < minX) {
-            left = minX
-          }
-          if (top > maxY) {
-            top = maxY
-          }
-          if (top < minY) {
-            top = minY
-          }
-          modalBoxElem.style.left = `${left}px`
-          modalBoxElem.style.top = `${top}px`
-          modalBoxElem.className = modalBoxElem.className.replace(/\s?is--drag/, '') + ' is--drag'
-          this.$emit('move', { type: 'move', $event: evnt })
-        }
-        document.onmouseup = () => {
-          document.onmousemove = domMousemove
-          document.onmouseup = domMouseup
-          if (remember && storage) {
-            this.$nextTick(() => {
-              this.savePosStorage()
-            })
-          }
-          setTimeout(() => {
-            modalBoxElem.className = modalBoxElem.className.replace(/\s?is--drag/, '')
-          }, 50)
-        }
-      }
-    },
-    dragEvent (evnt) {
-      evnt.preventDefault()
-      const { $listeners, marginSize, events = {}, remember, storage } = this
-      const { visibleHeight, visibleWidth } = DomTools.getDomNode()
-      const type = evnt.target.getAttribute('type')
-      const minWidth = XEUtils.toNumber(this.minWidth)
-      const minHeight = XEUtils.toNumber(this.minHeight)
-      const maxWidth = visibleWidth
-      const maxHeight = visibleHeight
-      const modalBoxElem = this.getBox()
-      const domMousemove = document.onmousemove
-      const domMouseup = document.onmouseup
-      const clientWidth = modalBoxElem.clientWidth
-      const clientHeight = modalBoxElem.clientHeight
-      const disX = evnt.clientX
-      const disY = evnt.clientY
-      const offsetTop = modalBoxElem.offsetTop
-      const offsetLeft = modalBoxElem.offsetLeft
-      const params = { type: 'resize', $modal: this }
-      document.onmousemove = evnt => {
-        evnt.preventDefault()
-        let dragLeft
-        let dragTop
-        let width
-        let height
-        switch (type) {
-          case 'wl':
-            dragLeft = disX - evnt.clientX
-            width = dragLeft + clientWidth
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-                modalBoxElem.style.left = `${offsetLeft - dragLeft}px`
-              }
-            }
-            break
-          case 'swst':
-            dragLeft = disX - evnt.clientX
-            dragTop = disY - evnt.clientY
-            width = dragLeft + clientWidth
-            height = dragTop + clientHeight
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-                modalBoxElem.style.left = `${offsetLeft - dragLeft}px`
-              }
-            }
-            if (offsetTop - dragTop > marginSize) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-                modalBoxElem.style.top = `${offsetTop - dragTop}px`
-              }
-            }
-            break
-          case 'swlb':
-            dragLeft = disX - evnt.clientX
-            dragTop = evnt.clientY - disY
-            width = dragLeft + clientWidth
-            height = dragTop + clientHeight
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-                modalBoxElem.style.left = `${offsetLeft - dragLeft}px`
-              }
-            }
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-              }
-            }
-            break
-          case 'st':
-            dragTop = disY - evnt.clientY
-            height = clientHeight + dragTop
-            if (offsetTop - dragTop > marginSize) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-                modalBoxElem.style.top = `${offsetTop - dragTop}px`
-              }
-            }
-            break
-          case 'wr':
-            dragLeft = evnt.clientX - disX
-            width = dragLeft + clientWidth
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-              }
-            }
-            break
-          case 'sest':
-            dragLeft = evnt.clientX - disX
-            dragTop = disY - evnt.clientY
-            width = dragLeft + clientWidth
-            height = dragTop + clientHeight
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-              }
-            }
-            if (offsetTop - dragTop > marginSize) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-                modalBoxElem.style.top = `${offsetTop - dragTop}px`
-              }
-            }
-            break
-          case 'selb':
-            dragLeft = evnt.clientX - disX
-            dragTop = evnt.clientY - disY
-            width = dragLeft + clientWidth
-            height = dragTop + clientHeight
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > minWidth) {
-                modalBoxElem.style.width = `${width < maxWidth ? width : maxWidth}px`
-              }
-            }
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-              }
-            }
-            break
-          case 'sb':
-            dragTop = evnt.clientY - disY
-            height = dragTop + clientHeight
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > minHeight) {
-                modalBoxElem.style.height = `${height < maxHeight ? height : maxHeight}px`
-              }
-            }
-            break
-        }
-        modalBoxElem.className = modalBoxElem.className.replace(/\s?is--drag/, '') + ' is--drag'
-        if (remember && storage) {
-          this.savePosStorage()
-        }
-        if ($listeners.resize) {
-          this.$emit('resize', params)
-        } else if (events.resize) {
-          events.resize.call(this, params)
-        }
-      }
-      document.onmouseup = () => {
-        this.revertLocat = null
-        document.onmousemove = domMousemove
-        document.onmouseup = domMouseup
-        setTimeout(() => {
-          modalBoxElem.className = modalBoxElem.className.replace(/\s?is--drag/, '')
-        }, 50)
-      }
-    },
-    getStorageMap (key) {
-      const version = GlobalConfig.version
-      const rest = XEUtils.toStringJSON(localStorage.getItem(key))
-      return rest && rest._v === version ? rest : { _v: version }
-    },
-    hasPosStorage () {
-      const { id, remember, storage, storageKey } = this
-      return !!(remember && storage && this.getStorageMap(storageKey)[id])
-    },
-    restorePosStorage () {
-      const { id, remember, storage, storageKey } = this
-      if (remember && storage) {
-        const posStorage = this.getStorageMap(storageKey)[id]
-        if (posStorage) {
-          const modalBoxElem = this.getBox()
-          const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(',')
-          if (left) {
-            modalBoxElem.style.left = `${left}px`
-          }
-          if (top) {
-            modalBoxElem.style.top = `${top}px`
-          }
-          if (width) {
-            modalBoxElem.style.width = `${width}px`
-          }
-          if (height) {
-            modalBoxElem.style.height = `${height}px`
-          }
-          if (zoomLeft && zoomTop) {
-            this.revertLocat = {
-              left: zoomLeft,
-              top: zoomTop,
-              width: zoomWidth,
-              height: zoomHeight
-            }
-          }
-        }
-      }
-    },
-    savePosStorage () {
-      const { id, remember, storage, storageKey, revertLocat } = this
-      if (remember && storage) {
-        const modalBoxElem = this.getBox()
-        const posStorageMap = this.getStorageMap(storageKey)
-        posStorageMap[id] = [
-          modalBoxElem.style.left,
-          modalBoxElem.style.top,
-          modalBoxElem.style.width,
-          modalBoxElem.style.height
-        ].concat(revertLocat ? [
-          revertLocat.left,
-          revertLocat.top,
-          revertLocat.width,
-          revertLocat.height
-        ] : []).map(val => val ? XEUtils.toNumber(val) : '').join(',')
-        localStorage.setItem(storageKey, XEUtils.toJSONString(posStorageMap))
-      }
-    }
-  }
-}