vxe-table 4.23.8 → 4.23.9

package/packages/ui/src/dom.ts

@@ -1,463 +1,466 @@
-import XEUtils from 'xe-utils'
-
-const reClsMap: { [key: string]: any } = {}
-
-let tpImgEl: HTMLImageElement | undefined
-
-export function initTpImg () {
-  if (!tpImgEl) {
-    tpImgEl = new Image()
-    tpImgEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
-  }
-  return tpImgEl
-}
-
-export function getTpImg () {
-  if (!tpImgEl) {
-    return initTpImg()
-  }
-  return tpImgEl
-}
-
-export function getPropClass (property: any, params: any) {
-  return property ? (XEUtils.isFunction(property) ? property(params) : property) || '' : ''
-}
-
-function getClsRE (cls: any) {
-  if (!reClsMap[cls]) {
-    reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g')
-  }
-  return reClsMap[cls]
-}
-
-function getNodeOffset (elem: any, container: any, rest: any): any {
-  if (elem) {
-    const parentElem = elem.parentNode
-    rest.top += elem.offsetTop
-    rest.left += elem.offsetLeft
-    if (parentElem && parentElem !== document.documentElement && parentElem !== document.body) {
-      rest.top -= parentElem.scrollTop
-      rest.left -= parentElem.scrollLeft
-    }
-    if (container && (elem === container || elem.offsetParent === container) ? 0 : elem.offsetParent) {
-      return getNodeOffset(elem.offsetParent, container, rest)
-    }
-  }
-  return rest
-}
-
-export function isPx (val: any) {
-  return val && /^\d+(\.\d+)?(px)?$/.test(val)
-}
-
-export function isScale (val: any) {
-  return val && /^\d+(\.\d+)?%$/.test(val)
-}
-
-export function hasClass (elem: any, cls: any) {
-  if (elem) {
-    if (elem.classList) {
-      return elem.classList.contains(cls)
-    }
-    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
-  }
-  return false
-}
-
-export function removeClass (elem: any, cls: any) {
-  if (elem && hasClass(elem, cls)) {
-    elem.className = elem.className.replace(getClsRE(cls), '')
-  }
-}
-
-export function addClass (elem: any, cls: string) {
-  if (elem && !hasClass(elem, cls)) {
-    removeClass(elem, cls)
-    elem.className = `${elem.className} ${cls}`
-  }
-}
-
-export function hasControlKey (evnt: KeyboardEvent | MouseEvent | DragEvent) {
-  return evnt.ctrlKey || evnt.metaKey
-}
-
-export function toCssUnit (val?: number | string, unit = 'px') {
-  if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
-    return `${val}${unit}`
-  }
-  return `${val || ''}`
-}
-
-export function queryElement (elem: HTMLTableCellElement, selector: string) {
-  if (elem) {
-    return elem.querySelector<HTMLElement>(selector)
-  }
-  return null
-}
-
-export function getDomNode () {
-  const documentElement = document.documentElement
-  const bodyElem = document.body
-  return {
-    scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
-    scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
-    visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
-    visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
-  }
-}
-
-export function getOffsetHeight (elem?: HTMLElement) {
-  return elem ? elem.offsetHeight : 0
-}
-
-export function getPaddingTopBottomSize (elem: HTMLElement) {
-  if (elem) {
-    const computedStyle = getComputedStyle(elem)
-    const paddingTop = XEUtils.toNumber(computedStyle.paddingTop)
-    const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom)
-    return paddingTop + paddingBottom
-  }
-  return 0
-}
-
-export function setScrollTop (elem: HTMLElement | null | undefined, scrollTop: number) {
-  if (elem) {
-    elem.scrollTop = scrollTop
-  }
-}
-
-export function setScrollLeft (elem: HTMLElement | null | undefined, scrollLeft: number) {
-  if (elem) {
-    elem.scrollLeft = scrollLeft
-  }
-}
-
-// export function setScrollLeftAndTop (elem: HTMLElement | null, scrollLeft: number, scrollTop: number) {
-//   if (elem) {
-//     elem.scrollLeft = scrollLeft
-//     elem.scrollTop = scrollTop
-//   }
-// }
-
-export function updateCellTitle (overflowElem: any, column: any) {
-  const content = column.type === 'html' ? overflowElem.innerText : overflowElem.textContent
-  if (overflowElem.getAttribute('title') !== content) {
-    overflowElem.setAttribute('title', content)
-  }
-}
-
-export function checkTargetElement (target: HTMLElement | EventTarget | null, exEls: (HTMLElement | null)[], endEl?: HTMLElement | EventTarget | null) {
-  let targetEl = target
-  if (!exEls || !exEls.length) {
-    return false
-  }
-  const [exEl1, exEl2, exEl3] = exEls
-  while (targetEl) {
-    if (exEl1 === targetEl || (exEl2 && targetEl === exEl2) || (exEl3 && targetEl === exEl3)) {
-      return true
-    }
-    if (endEl && targetEl === endEl) {
-      return false
-    }
-    targetEl = (targetEl as HTMLElement).parentElement
-  }
-  return false
-}
-
-/**
- * 检查触发源是否属于目标节点
- */
-export function getEventTargetNode (evnt: any, container: any, queryCls?: string, queryMethod?: (target: Element) => boolean) {
-  let targetElem
-  let target = (evnt.target.shadowRoot && evnt.composed) ? (evnt.composedPath()[0] || evnt.target) : evnt.target
-  while (target && target.nodeType && target !== document) {
-    if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
-      targetElem = target
-    } else if (target === container) {
-      return { flag: queryCls ? !!targetElem : true, container, targetElem: targetElem }
-    }
-    target = target.parentNode
-  }
-  return { flag: false }
-}
-
-/**
- * 获取元素相对于 document 的位置
- */
-export function getOffsetPos (elem: any, container: any) {
-  return getNodeOffset(elem, container, { left: 0, top: 0 })
-}
-
-export function getAbsolutePos (elem: any) {
-  const bounding = elem.getBoundingClientRect()
-  const boundingTop = bounding.top
-  const boundingLeft = bounding.left
-  const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
-  return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
-}
-
-export function hasEventInputTarget (target: EventTarget | Element | null) {
-  const tagName = target ? (target as Element).tagName : ''
-  return tagName && ['input', 'textarea'].includes((tagName.toLowerCase()))
-}
-
-/**
- * 判断是否由内部可复用控件触发，输入框带有 vxe-reusekeep-control
- */
-function hasReusekeepControl (elem: EventTarget | HTMLElement | null) {
-  if (elem) {
-    return hasClass(elem as HTMLElement, 'vxe-reusekeep-control')
-  }
-  return false
-}
-
-export function hasAxternalInputTarget (target: EventTarget | Element | null) {
-  return hasEventInputTarget(target) ? !hasReusekeepControl(target) : false
-}
-
-const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
-const scrollIntoView = 'scrollIntoView'
-
-export function scrollToView (elem: any) {
-  if (elem) {
-    if (elem[scrollIntoViewIfNeeded]) {
-      elem[scrollIntoViewIfNeeded]()
-    } else if (elem[scrollIntoView]) {
-      elem[scrollIntoView]()
-    }
-  }
-}
-
-export function triggerEvent (targetElem: Element, type: string) {
-  if (targetElem) {
-    targetElem.dispatchEvent(new Event(type))
-  }
-}
-
-export function isNodeElement (elem: any): elem is HTMLElement {
-  return elem && elem.nodeType === 1
-}
-
-export function scrollTopTo (diffNum: number, cb: (progress: number) => void) {
-  const duration = Math.abs(diffNum)
-  const startTime = performance.now()
-  let countTop = 0
-  const step = (timestamp: number) => {
-    let progress = (timestamp - startTime) / duration
-    if (progress < 0) {
-      progress = 0
-    } else if (progress > 1) {
-      progress = 1
-    }
-    const easedProgress = Math.pow(progress, 2)
-    const offsetTop = Math.floor((diffNum * easedProgress)) - countTop
-    countTop += offsetTop
-    cb(offsetTop)
-    if (progress < 1) {
-      requestAnimationFrame(step)
-    }
-  }
-  requestAnimationFrame(step)
-}
-
-let wtlFrame: any
-export function wheelScrollLeftTo (scrollLeft: number, cb: (offsetLeft: number) => void) {
-  if (wtlFrame) {
-    cancelAnimationFrame(wtlFrame)
-  }
-  wtlFrame = requestAnimationFrame(() => {
-    cb(scrollLeft)
-    wtlFrame = null
-  })
-}
-
-let wtaFrame: any
-export function wheelScrollTopTo (diffNum: number, cb: (progress: number) => void) {
-  if (wtaFrame) {
-    cancelAnimationFrame(wtaFrame)
-  }
-  wtaFrame = requestAnimationFrame(() => {
-    const offsetTop = diffNum
-    cb(offsetTop)
-    wtaFrame = null
-  })
-}
-
-interface PanelPlacementOptions {
-  defaultTop?: number
-  defaultLeft?: number
-  placement?: '' | 'top' | 'bottom' | null
-  defaultPlacement?: '' | 'top' | 'bottom' | null
-  appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
-  teleportTo?: boolean
-  marginSize?: number
-  isMinWidth?: boolean
-}
-
-/**
- * 通用定位计算
- */
-export function updatePanelPlacement (targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
-  const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
-    appendTo: '',
-    teleportTo: false,
-    marginSize: 18,
-    isMinWidth: true
-  }, options)
-  let panelPlacement: 'top' | 'bottom' = 'bottom'
-  let top: number | '' = ''
-  let bottom: number | '' = ''
-  let left = 0
-  let minWidth: number | '' = ''
-  let arrowLeft: number | '' = ''
-  const stys: Record<string, string> = {}
-  if (panelElem && targetElem) {
-    const bodyEl = document.body
-    const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem)
-    if (parentWrapperEl) {
-      const targetWidth = targetElem.offsetWidth
-      const targetHeight = targetElem.offsetHeight
-      const panelWidth = panelElem.offsetWidth
-      const panelHeight = panelElem.offsetHeight
-
-      const parentWrapperRect = parentWrapperEl.getBoundingClientRect()
-      const panelRect = panelElem.getBoundingClientRect()
-      const targetRect = targetElem.getBoundingClientRect()
-      const visibleHeight = bodyEl.clientHeight
-      const visibleWidth = bodyEl.clientWidth
-
-      const parentWrapperScrollLeft = parentWrapperEl.scrollLeft
-      const parentWrapperScrollTop = parentWrapperEl.scrollTop
-      const parentWrapperOffsetLeft = parentWrapperRect.left
-      const parentWrapperOffsetTop = parentWrapperRect.top
-      const targetLeft = targetRect.left
-      const targetTop = targetRect.top
-
-      minWidth = targetElem.offsetWidth
-
-      if (teleportTo) {
-        left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft
-        top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop
-        if (placement === 'top') {
-          panelPlacement = 'top'
-          top = targetTop - panelHeight
-        } else if (!placement) {
-          if (defaultPlacement === 'top') {
-            panelPlacement = 'top'
-            if (!defaultTop) {
-              top = targetTop - panelHeight
-            }
-            // 如果上面不够放，则向下
-            if (top < marginSize) {
-              panelPlacement = 'bottom'
-              top = targetTop + targetHeight
-            }
-            // 如果下面不够放，则向上（优先）
-            if (top + panelHeight + marginSize > visibleHeight) {
-              panelPlacement = 'top'
-              top = targetTop - panelHeight
-            }
-          } else {
-            // 如果下面不够放，则向上
-            if (top + panelHeight + marginSize > visibleHeight) {
-              panelPlacement = 'top'
-              top = targetTop - panelHeight
-            }
-            // 如果上面不够放，则向下（优先）
-            if (top < marginSize) {
-              panelPlacement = 'bottom'
-              top = targetTop + targetHeight
-            }
-          }
-        }
-        // 如果溢出右边
-        if (left + panelWidth + marginSize > visibleWidth) {
-          left -= left + panelWidth + marginSize - visibleWidth
-        }
-        // 如果溢出左边
-        if (left < marginSize) {
-          left = marginSize
-        }
-
-        // 偏移
-        top -= parentWrapperOffsetTop
-        left -= parentWrapperOffsetLeft
-      } else {
-        if (placement === 'top') {
-          panelPlacement = 'top'
-          bottom = targetHeight
-        } else if (!placement) {
-          // 如果下面不够放，则向上
-          top = targetHeight
-          if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
-            // 如果上面不够放，则向下（优先）
-            if (targetTop - targetHeight - panelHeight > marginSize) {
-              panelPlacement = 'top'
-              top = ''
-              bottom = targetHeight
-            }
-          }
-        }
-        // 是否超出右侧
-        if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
-          left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
-        }
-      }
-      if (XEUtils.isNumber(top)) {
-        stys.top = toCssUnit(top)
-      }
-      if (XEUtils.isNumber(bottom)) {
-        stys.bottom = toCssUnit(bottom)
-      }
-      if (XEUtils.isNumber(left)) {
-        stys.left = toCssUnit(left)
-      }
-      if (isMinWidth && XEUtils.isNumber(minWidth)) {
-        stys.minWidth = toCssUnit(minWidth)
-      }
-
-      // 箭头
-      if (left === targetLeft) {
-        if (targetWidth <= panelWidth) {
-          arrowLeft = targetWidth / 2
-        }
-      } else if (left < targetLeft) {
-        if (left + panelWidth > targetLeft + targetWidth) {
-          arrowLeft = (targetLeft - left) + targetWidth / 2
-        } else {
-          arrowLeft = (targetLeft - left) + (panelWidth - (targetLeft - left)) / 2
-        }
-      }
-    }
-  }
-  return {
-    top: top || 0,
-    bottom: bottom || 0,
-    left: left || 0,
-    arrowLeft: arrowLeft || 0,
-    style: stys,
-    placement: panelPlacement
-  }
-}
-
-export function getPopupWrapperElement (panelElem: HTMLElement | null | undefined) {
-  if (!panelElem) {
-    return null
-  }
-  const bodyEl = document.body
-  const parentEl = panelElem.parentElement
-  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
-}
-
-export function getPopupContainer (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
-  const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
-  return selectElem || 'body'
-}
-
-export function getPopupAppendElement (appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
-  const selectElem = getPopupContainer(appendTo)
-  if (XEUtils.isString(selectElem)) {
-    return document.querySelector<HTMLElement>(selectElem) || document.body
-  }
-  return selectElem
-}
+import XEUtils from 'xe-utils'
+
+const reClsMap: { [key: string]: any } = {}
+
+let tpImgEl: HTMLImageElement | undefined
+
+export function initTpImg() {
+  if (!tpImgEl) {
+    tpImgEl = new Image()
+    tpImgEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+  }
+  return tpImgEl
+}
+
+export function getTpImg() {
+  if (!tpImgEl) {
+    return initTpImg()
+  }
+  return tpImgEl
+}
+
+export function getPropClass(property: any, params: any) {
+  return property ? (XEUtils.isFunction(property) ? property(params) : property) || '' : ''
+}
+
+function getClsRE(cls: any) {
+  if (!reClsMap[cls]) {
+    reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g')
+  }
+  return reClsMap[cls]
+}
+
+function getNodeOffset(elem: any, container: any, rest: any): any {
+  if (elem) {
+    const parentElem = elem.parentNode
+    rest.top += elem.offsetTop
+    rest.left += elem.offsetLeft
+    if (parentElem && parentElem !== document.documentElement && parentElem !== document.body) {
+      rest.top -= parentElem.scrollTop
+      rest.left -= parentElem.scrollLeft
+    }
+    if (container && (elem === container || elem.offsetParent === container) ? 0 : elem.offsetParent) {
+      return getNodeOffset(elem.offsetParent, container, rest)
+    }
+  }
+  return rest
+}
+
+export function isPx(val: any) {
+  return val && /^\d+(\.\d+)?(px)?$/.test(val)
+}
+
+export function isScale(val: any) {
+  return val && /^\d+(\.\d+)?%$/.test(val)
+}
+
+export function hasClass(elem: any, cls: any) {
+  if (elem) {
+    if (elem.classList) {
+      return elem.classList.contains(cls)
+    }
+    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
+  }
+  return false
+}
+
+export function removeClass(elem: any, cls: any) {
+  if (elem && hasClass(elem, cls)) {
+    elem.className = elem.className.replace(getClsRE(cls), '')
+  }
+}
+
+export function addClass(elem: any, cls: string) {
+  if (elem && !hasClass(elem, cls)) {
+    removeClass(elem, cls)
+    elem.className = `${elem.className} ${cls}`
+  }
+}
+
+export function hasControlKey(evnt: KeyboardEvent | MouseEvent | DragEvent) {
+  return evnt.ctrlKey || evnt.metaKey
+}
+
+export function toCssUnit(val?: number | string, unit = 'px') {
+  if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
+    return `${val}${unit}`
+  }
+  return `${val || ''}`
+}
+
+export function queryElement(elem: HTMLTableCellElement, selector: string) {
+  if (elem) {
+    return elem.querySelector<HTMLElement>(selector)
+  }
+  return null
+}
+
+export function getDomNode() {
+  const documentElement = document.documentElement
+  const bodyElem = document.body
+  return {
+    scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
+    scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
+    visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
+    visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
+  }
+}
+
+export function getOffsetHeight(elem?: HTMLElement) {
+  return elem ? elem.offsetHeight : 0
+}
+
+export function getPaddingTopBottomSize(elem: HTMLElement) {
+  if (elem) {
+    const computedStyle = getComputedStyle(elem)
+    const paddingTop = XEUtils.toNumber(computedStyle.paddingTop)
+    const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom)
+    return paddingTop + paddingBottom
+  }
+  return 0
+}
+
+export function setScrollTop(elem: HTMLElement | null | undefined, scrollTop: number) {
+  if (elem) {
+    elem.scrollTop = scrollTop
+  }
+}
+
+export function setScrollLeft(elem: HTMLElement | null | undefined, scrollLeft: number) {
+  if (elem) {
+    elem.scrollLeft = scrollLeft
+  }
+}
+
+// export function setScrollLeftAndTop (elem: HTMLElement | null, scrollLeft: number, scrollTop: number) {
+//   if (elem) {
+//     elem.scrollLeft = scrollLeft
+//     elem.scrollTop = scrollTop
+//   }
+// }
+
+export function updateCellTitle(overflowElem: any, column: any) {
+  const content = column.type === 'html' ? overflowElem.innerText : overflowElem.textContent
+  if (overflowElem.getAttribute('title') !== content) {
+    overflowElem.setAttribute('title', content)
+  }
+}
+
+export function checkTargetElement(target: HTMLElement | EventTarget | null, exEls: (HTMLElement | null)[], endEl?: HTMLElement | EventTarget | null) {
+  let targetEl = target
+  if (!exEls || !exEls.length) {
+    return false
+  }
+  const [exEl1, exEl2, exEl3] = exEls
+  while (targetEl) {
+    if (exEl1 === targetEl || (exEl2 && targetEl === exEl2) || (exEl3 && targetEl === exEl3)) {
+      return true
+    }
+    if (endEl && targetEl === endEl) {
+      return false
+    }
+    targetEl = (targetEl as HTMLElement).parentElement
+  }
+  return false
+}
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+export function getEventTargetNode(evnt: any, container: any, queryCls?: string, queryMethod?: (target: Element) => boolean) {
+  let targetElem
+  let target = evnt.target.shadowRoot && evnt.composed ? evnt.composedPath()[0] || evnt.target : evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: queryCls ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 获取元素相对于 document 的位置
+ */
+export function getOffsetPos(elem: any, container: any) {
+  return getNodeOffset(elem, container, { left: 0, top: 0 })
+}
+
+export function getAbsolutePos(elem: any) {
+  const bounding = elem.getBoundingClientRect()
+  const boundingTop = bounding.top
+  const boundingLeft = bounding.left
+  const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode()
+  return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
+}
+
+export function hasEventInputTarget(target: EventTarget | Element | null) {
+  const tagName = target ? (target as Element).tagName : ''
+  return tagName && ['input', 'textarea'].includes(tagName.toLowerCase())
+}
+
+/**
+ * 判断是否由内部可复用控件触发，输入框带有 vxe-reusekeep-control
+ */
+function hasReusekeepControl(elem: EventTarget | HTMLElement | null) {
+  if (elem) {
+    return hasClass(elem as HTMLElement, 'vxe-reusekeep-control')
+  }
+  return false
+}
+
+export function hasAxternalInputTarget(target: EventTarget | Element | null) {
+  return hasEventInputTarget(target) ? !hasReusekeepControl(target) : false
+}
+
+const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
+const scrollIntoView = 'scrollIntoView'
+
+export function scrollToView(elem: any) {
+  if (elem) {
+    if (elem[scrollIntoViewIfNeeded]) {
+      elem[scrollIntoViewIfNeeded]()
+    } else if (elem[scrollIntoView]) {
+      elem[scrollIntoView]()
+    }
+  }
+}
+
+export function triggerEvent(targetElem: Element, type: string) {
+  if (targetElem) {
+    targetElem.dispatchEvent(new Event(type))
+  }
+}
+
+export function isNodeElement(elem: any): elem is HTMLElement {
+  return elem && elem.nodeType === 1
+}
+
+export function scrollTopTo(diffNum: number, cb: (progress: number) => void) {
+  const duration = Math.abs(diffNum)
+  const startTime = performance.now()
+  let countTop = 0
+  const step = (timestamp: number) => {
+    let progress = (timestamp - startTime) / duration
+    if (progress < 0) {
+      progress = 0
+    } else if (progress > 1) {
+      progress = 1
+    }
+    const easedProgress = Math.pow(progress, 2)
+    const offsetTop = Math.floor(diffNum * easedProgress) - countTop
+    countTop += offsetTop
+    cb(offsetTop)
+    if (progress < 1) {
+      requestAnimationFrame(step)
+    }
+  }
+  requestAnimationFrame(step)
+}
+
+let wtlFrame: any
+export function wheelScrollLeftTo(scrollLeft: number, cb: (offsetLeft: number) => void) {
+  if (wtlFrame) {
+    cancelAnimationFrame(wtlFrame)
+  }
+  wtlFrame = requestAnimationFrame(() => {
+    cb(scrollLeft)
+    wtlFrame = null
+  })
+}
+
+let wtaFrame: any
+export function wheelScrollTopTo(diffNum: number, cb: (progress: number) => void) {
+  if (wtaFrame) {
+    cancelAnimationFrame(wtaFrame)
+  }
+  wtaFrame = requestAnimationFrame(() => {
+    const offsetTop = diffNum
+    cb(offsetTop)
+    wtaFrame = null
+  })
+}
+
+interface PanelPlacementOptions {
+  defaultTop?: number
+  defaultLeft?: number
+  placement?: '' | 'top' | 'bottom' | null
+  defaultPlacement?: '' | 'top' | 'bottom' | null
+  appendTo?: string | HTMLElement | ((params: any) => string | HTMLElement)
+  teleportTo?: boolean
+  marginSize?: number
+  isMinWidth?: boolean
+}
+
+/**
+ * 通用定位计算
+ */
+export function updatePanelPlacement(targetElem: HTMLElement | null | undefined, panelElem: HTMLElement | null | undefined, options: PanelPlacementOptions) {
+  const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign(
+    {
+      appendTo: '',
+      teleportTo: false,
+      marginSize: 18,
+      isMinWidth: true
+    },
+    options
+  )
+  let panelPlacement: 'top' | 'bottom' = 'bottom'
+  let top: number | '' = ''
+  let bottom: number | '' = ''
+  let left = 0
+  let minWidth: number | '' = ''
+  let arrowLeft: number | '' = ''
+  const stys: Record<string, string> = {}
+  if (panelElem && targetElem) {
+    const bodyEl = document.body
+    const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem)
+    if (parentWrapperEl) {
+      const targetWidth = targetElem.offsetWidth
+      const targetHeight = targetElem.offsetHeight
+      const panelWidth = panelElem.offsetWidth
+      const panelHeight = panelElem.offsetHeight
+
+      const parentWrapperRect = parentWrapperEl.getBoundingClientRect()
+      const panelRect = panelElem.getBoundingClientRect()
+      const targetRect = targetElem.getBoundingClientRect()
+      const visibleHeight = bodyEl.clientHeight
+      const visibleWidth = bodyEl.clientWidth
+
+      const parentWrapperScrollLeft = parentWrapperEl.scrollLeft
+      const parentWrapperScrollTop = parentWrapperEl.scrollTop
+      const parentWrapperOffsetLeft = parentWrapperRect.left
+      const parentWrapperOffsetTop = parentWrapperRect.top
+      const targetLeft = targetRect.left
+      const targetTop = targetRect.top
+
+      minWidth = targetElem.offsetWidth
+
+      if (teleportTo) {
+        left = (defaultLeft || targetLeft - (panelWidth - targetWidth) / 2) - parentWrapperScrollLeft
+        top = (defaultTop || targetTop + targetHeight) - parentWrapperScrollTop
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          top = targetTop - panelHeight
+        } else if (!placement) {
+          if (defaultPlacement === 'top') {
+            panelPlacement = 'top'
+            if (!defaultTop) {
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+            // 如果下面不够放，则向上（优先）
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+          } else {
+            // 如果下面不够放，则向上
+            if (top + panelHeight + marginSize > visibleHeight) {
+              panelPlacement = 'top'
+              top = targetTop - panelHeight
+            }
+            // 如果上面不够放，则向下（优先）
+            if (top < marginSize) {
+              panelPlacement = 'bottom'
+              top = targetTop + targetHeight
+            }
+          }
+        }
+        // 如果溢出右边
+        if (left + panelWidth + marginSize > visibleWidth) {
+          left -= left + panelWidth + marginSize - visibleWidth
+        }
+        // 如果溢出左边
+        if (left < marginSize) {
+          left = marginSize
+        }
+
+        // 偏移
+        top -= parentWrapperOffsetTop
+        left -= parentWrapperOffsetLeft
+      } else {
+        if (placement === 'top') {
+          panelPlacement = 'top'
+          bottom = targetHeight
+        } else if (!placement) {
+          // 如果下面不够放，则向上
+          top = targetHeight
+          if (targetTop + targetHeight + panelHeight + marginSize > visibleHeight) {
+            // 如果上面不够放，则向下（优先）
+            if (targetTop - targetHeight - panelHeight > marginSize) {
+              panelPlacement = 'top'
+              top = ''
+              bottom = targetHeight
+            }
+          }
+        }
+        // 是否超出右侧
+        if (panelRect.left + panelRect.width + marginSize > visibleWidth) {
+          left = -(panelRect.left + panelRect.width + marginSize - visibleWidth)
+        }
+      }
+      if (XEUtils.isNumber(top)) {
+        stys.top = toCssUnit(top)
+      }
+      if (XEUtils.isNumber(bottom)) {
+        stys.bottom = toCssUnit(bottom)
+      }
+      if (XEUtils.isNumber(left)) {
+        stys.left = toCssUnit(left)
+      }
+      if (isMinWidth && XEUtils.isNumber(minWidth)) {
+        stys.minWidth = toCssUnit(minWidth)
+      }
+
+      // 箭头
+      if (left === targetLeft) {
+        if (targetWidth <= panelWidth) {
+          arrowLeft = targetWidth / 2
+        }
+      } else if (left < targetLeft) {
+        if (left + panelWidth > targetLeft + targetWidth) {
+          arrowLeft = targetLeft - left + targetWidth / 2
+        } else {
+          arrowLeft = targetLeft - left + (panelWidth - (targetLeft - left)) / 2
+        }
+      }
+    }
+  }
+  return {
+    top: top || 0,
+    bottom: bottom || 0,
+    left: left || 0,
+    arrowLeft: arrowLeft || 0,
+    style: stys,
+    placement: panelPlacement
+  }
+}
+
+export function getPopupWrapperElement(panelElem: HTMLElement | null | undefined) {
+  if (!panelElem) {
+    return null
+  }
+  const bodyEl = document.body
+  const parentEl = panelElem.parentElement
+  return (parentEl === bodyEl ? document.documentElement : parentEl) || null
+}
+
+export function getPopupContainer(appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
+  const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo
+  return selectElem || 'body'
+}
+
+export function getPopupAppendElement(appendTo: string | HTMLElement | ((params: any) => string | HTMLElement) | undefined) {
+  const selectElem = getPopupContainer(appendTo)
+  if (XEUtils.isString(selectElem)) {
+    return document.querySelector<HTMLElement>(selectElem) || document.body
+  }
+  return selectElem
+}