IntersectionObserver懒加载

/**
 * 将表单项错误提示移动到 label 上
 */
function moveMessage(elementId: string) {
  const element = document.getElementById(elementId)
  if (!element) return

  const { parentElement } = element
  if (!parentElement) return

  // 1、找到 label 内部的错误信息
  const labelElement = parentElement.querySelector('.arco-form-item-label-col')
  const messageError = labelElement?.querySelector(
    '.arco-form-item-message'
  ) as HTMLElement

  // 2、如果没有错误样式但是还残留提示，就移除它
  const hasError = parentElement.classList.contains('arco-form-item-error')
  if (!hasError && messageError) {
    messageError.remove()
  }

  // 3、将错误提示移动到兄弟元素（label）下
  const message = element.querySelector(
    '.arco-form-item-message'
  ) as HTMLElement
  const broElement = element.previousElementSibling

  if (message && broElement) {
    message.style.display = 'block'
    broElement.appendChild(message)
  }
}

// 监听元素集合
const observers: MutationObserver[] = []

// 停止监听
export const stopObserver = () => {
  observers.forEach((o) => o?.disconnect())
}

/**
 * 全局移动错误提示工具函数
 * @param elementIds 需要移动的表单元素id数组
 * @param foreId 表单Id，默认 my-form
 */
export const handleMoveMessagesFields = (
  elementIds: string[],
  foreId = 'my-form'
) => {
  nextTick(() => {
    elementIds.forEach((elementId) => {
      const fullId = `${foreId}-${elementId}`
      const element = document.getElementById(fullId)
      if (!element) return

      // 建立 MutationObserver 监听 DOM 变化
      const observer = new MutationObserver(() => {
        moveMessage(fullId)
      })

      observer.observe(element, {
        childList: true,
        subtree: true,
        attributes: true,
      })
      observers.push(observer)

      // 初始化执行一次，保证初始状态下也处理好
      moveMessage(fullId)
    })
  })
}

使用
onMount时期调用；onUnmounted停止

  onMounted(() => {
    // 特殊处理错误提示（移动提示到label上）
    handleMoveMessagesFields([
      'patientSource',
      'pathologyNumber',
      'serialNumber',
      'libraryName',
      'patientName',
      'sex',
      'age',
      'inspectionItemName',
      'fees',
      'transmitOther',
    ])
  })

onUnmounted(() => {
    // 停止监听
    stopObserver()
  })