utils.ts 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import { h } from 'vue'
  2. import { NIcon } from 'naive-ui'
  3. import screenfull from 'screenfull'
  4. import debounce from 'lodash/debounce'
  5. /**
  6. * * 生成一个用不重复的ID
  7. * @param { Number } randomLength
  8. */
  9. export function getUUID(randomLength: number) {
  10. return Number(
  11. Math.random().toString().substr(2, randomLength) + Date.now()
  12. ).toString(36)
  13. }
  14. /**
  15. * * render 图标
  16. * @param icon 图标
  17. * @param set 设置项
  18. */
  19. export const renderIcon = (icon: any, set = {}) => {
  20. return () => h(NIcon, set, { default: () => h(icon) })
  21. }
  22. /**
  23. * * render 语言
  24. * @param lang 语言标识
  25. * @param set 设置项
  26. * @param tag 要渲染成的标签
  27. */
  28. export const renderLang = (lang: string, set = {}, tag = 'span') => {
  29. return () => h(tag, set, { default: () => window['$t'](lang) })
  30. }
  31. /**
  32. * * 处理 vite 中无法使用 require 的问题,utils 文件为根路径
  33. * @param path
  34. * @param name
  35. * @returns url
  36. */
  37. export const requireUrl = (path: string, name: string) => {
  38. return new URL(`${path}/${name}`, import.meta.url).href
  39. }
  40. /**
  41. * * 获取错误处理图片,默认 404 图
  42. * @param path
  43. * @param name
  44. * @returns url
  45. */
  46. export const requireFallbackImg = (path?: string, name?: string) => {
  47. const url = path && name
  48. return new URL(
  49. url ? `${path}/${name}` : '../assets/images/exception/image-404.png',
  50. import.meta.url
  51. ).href
  52. }
  53. export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
  54. // 是否是全屏
  55. if (isFullscreen) return screenfull.isFullscreen
  56. // 是否支持全屏
  57. if (isEnabled) return screenfull.isEnabled
  58. if (screenfull.isEnabled) {
  59. screenfull.toggle()
  60. return
  61. }
  62. // TODO lang
  63. window['$message'].warning('您的浏览器不支持全屏功能!')
  64. }
  65. /**
  66. * * 挂载监听
  67. * @returns url
  68. */
  69. export const goAddEventListener = <K extends keyof WindowEventMap>(
  70. target: EventTarget,
  71. type: K,
  72. listener: EventListenerOrEventListenerObject,
  73. options?: boolean | AddEventListenerOptions | undefined
  74. ) => {
  75. if (!target) return
  76. target.addEventListener(
  77. type,
  78. debounce(listener, 300, {
  79. leading: true,
  80. trailing: false
  81. }),
  82. options
  83. )
  84. }
  85. /**
  86. * * 卸载监听
  87. * @returns url
  88. */
  89. export const goRemoveEventListener = <K extends keyof WindowEventMap>(
  90. target: EventTarget,
  91. type: K,
  92. listener: EventListenerOrEventListenerObject
  93. ) => {
  94. if (!target) return
  95. target.removeEventListener(type, listener)
  96. }