utils.ts 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  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. /**
  54. * 全屏操作函数
  55. * @param isFullscreen
  56. * @param isEnabled
  57. * @returns
  58. */
  59. export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
  60. // 是否是全屏
  61. if (isFullscreen) return screenfull.isFullscreen
  62. // 是否支持全屏
  63. if (isEnabled) return screenfull.isEnabled
  64. if (screenfull.isEnabled) {
  65. screenfull.toggle()
  66. return
  67. }
  68. // TODO lang
  69. window['$message'].warning('您的浏览器不支持全屏功能!')
  70. }
  71. /**
  72. * * 挂载监听
  73. */
  74. export const goAddEventListener = <K extends keyof WindowEventMap>(
  75. target: EventTarget,
  76. type: K,
  77. listener: any,
  78. options?: boolean | AddEventListenerOptions | undefined
  79. ) => {
  80. if (!target) return
  81. target.addEventListener(
  82. type,
  83. debounce(listener, 300, {
  84. leading: true,
  85. trailing: false
  86. }),
  87. options
  88. )
  89. }
  90. /**
  91. * * 卸载监听
  92. */
  93. export const goRemoveEventListener = <K extends keyof WindowEventMap>(
  94. target: EventTarget,
  95. type: K,
  96. listener: EventListenerOrEventListenerObject
  97. ) => {
  98. if (!target) return
  99. target.removeEventListener(type, listener)
  100. }