create-iking-admin/template-v2/main-app/hooks/use-dom.ts

金合技术中台脚手架

/*
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-07-25 16:13:46
 * @LastEditTime : 2023-10-31 19:15:17
 */

/**
 * @description: 获取文本宽度
 * @param {string} text
 * @param {*} font 字体样式（一般只传入字体font-size值） 也可以是'14px sans-serif'等
 * @return {number}
 */
export const useTextWidth = (text: string, font = '14px') => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  if (!context)
    return 0

  context.font = font
  const metrics = context.measureText(text)
  return metrics.width
}

export const intoErrorView = (option: {
  behavior?: string
  block?: string
  inline?: string
} = {}) => {
  const defaultOpts = {
    behavior: 'smooth',
    block: 'end',
    inline: 'nearest'
  }
  const dom = document.querySelector('.el-form-item.is-error')
  dom && dom.scrollIntoView({
    ...defaultOpts,
    ...option
  } as any)
}