一些辅助函数

沈孟平

最后更新于 2026-04-23 19:53:53

helper 模块主要是一些项目内经常会复用的小工具，包含属性名处理、浏览器环境判断和下载能力。

导出总览

名称	说明
transformAttrs2kebabCase	把 attrs 对象中的驼峰 key 转为 kebab-case
camel2kebab	把单个驼峰字符串转为 kebab-case
getBrowser	获取当前浏览器和终端环境信息
isDdOrZzd	判断是否运行在钉钉或浙政钉环境
downloadBlob	下载 Blob 数据为文件

将 attrs 转换为 kebab 字符串

/** 将 attrs 转换为 kebab 字符串 */
export function transformAttrs2kebabCase(attrs: Record<string, any>) {
  const newAttrs: any = { }
  Object.keys(attrs).forEach((key) => {
    const value = attrs[key]
    // 如果是事件则不转换
    if (key.startsWith('on')) {
      newAttrs[key] = value
      return
    }
    const kebabCaseKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
    newAttrs[kebabCaseKey] = value
  })
  return newAttrs
}

将驼峰字符串转换为 kebab 字符串

/** 将驼峰字符串转换为 kebab 字符串 */
export const camel2kebab = (str: string) => str && str.replace(/\B([A-Z])/g, '-$1').toLowerCase()

什么时候会用到它

• 组件内部要把 Vue attrs 透传给第三方组件，但第三方按 kebab-case 取字段
• 想把 headerCls 这类命名转换成 header-cls

获取浏览器信息

/** 获取浏览器信息 */
export function getBrowser() {
  return {
    versions: (() => {
      const u = window.navigator.userAgent
      return {
        // 移动终端浏览器版本信息
        trident: u.includes('Trident'), // IE内核
        presto: u.includes('Presto'), // opera内核
        webKit: u.includes('AppleWebKit'), // 苹果、谷歌内核
        gecko: u.includes('Gecko') && !u.includes('KHTML'), // 火狐内核
        mobile: !!/AppleWebKit.*Mobile.*/.test(u), // 是否为移动终端
        ios: !!/\(i[^;]+;(?: U;)? CPU.+Mac OS X/.test(u), // ios终端
        android: u.includes('Android') || u.includes('Linux'), // android终端或者uc浏览器
        iPhone: u.includes('iPhone'), // 是否为iPhone或者QQHD浏览器
        iPad: u.includes('iPad'), // 是否iPad
        dingtalk: u.includes('DingTalk'), // 是否为钉钉内部
        taurusapp: u.includes('TaurusApp'), // 是否为专有钉钉和浙政钉钉
        alipay: u.includes('AlipayClient'), // 是否为支付宝
        wechat: /micromessenger/i.test(u), // 是否微信中
        webApp: !u.includes('Safari'), // 是否web应该程序，没有头部与底部
        dtDreamApp: u.toLowerCase().includes('dtdreamweb'), // 浙里办 APP
        alipayMini: u.toLowerCase().includes('miniprogram') && u.toLowerCase().includes('alipay'), // 浙里办支付宝小程序
      }
    })(),
    language: window.navigator.language.toLowerCase(),
  }
}

判断是否是钉钉或者浙政钉

/** 判断是否是钉钉或者浙政钉 */
export function isDdOrZzd() {
  return getBrowser().versions.dingtalk || getBrowser().versions.taurusapp
}

适合的场景

• 钉钉/浙政钉内嵌页面兼容
• 根据终端环境决定跳转、鉴权、分享、上传等行为

下载 blob 格式的文件

/** 下载 blob 格式的文件 */
export function downloadBlob(blob: Blob, name: string): void {
  const link = document.createElement('a')
  const objectURL = URL.createObjectURL(blob)
  link.href = objectURL
  const cleanName = name.trim().replace(/^["'_]+|["'_]+$/g, '')
  link.download = cleanName
  link.click()
  URL.revokeObjectURL(objectURL)
  link.remove()
}

使用建议

• downloadBlob 适合导出文件、下载接口返回的二进制数据。
• 如果文件名来自服务端，建议先交给 downloadBlob 做一次清洗，避免浏览器自动补下划线。