开发常用的工具函数

　　1.时间格式化

　　第三方库：day.js、moment.js，以下为手搓简易版（功能少偶尔用）

export const useFormatDate = (
  date: Date,
  firtType: string = '-',
  secondType: string = ':',
  centerSlice: string = ' ',
) => {
  const year = String(date.getFullYear())
  let month = String(date.getMonth() + 1)
  let day = String(date.getDate())
  let hour = String(date.getHours())
  let minute = String(date.getMinutes())
  let second = String(date.getSeconds())
  if (month.length == 1) month = '' + 0 + month
  if (day.length == 1) day = '' + 0 + day
  if (hour.length == 1) hour = '' + 0 + hour
  if (minute.length == 1) minute = '' + 0 + minute
  if (second.length == 1) second = '' + 0 + second
  let formatRes =
    year +
    firtType +
    month +
    firtType +
    day +
    centerSlice +
    hour +
    secondType +
    minute +
    secondType +
    second
  return {
    year,
    month,
    day,
    hour,
    minute,
    second,
    formatRes,
  }
}

　　2.数字滚动效果

　　第三方库：CountUp.js，以下为自己封装的简易版（功能还不完善）

export const useCountUp = (el: HTMLElement, wait: number = 20) => {
  let counter = Number(String(el.innerText))
  let nowCount: any = 0
  let integer = true
  let timer: any = null
  let step: number = 10

  const arr = String(counter).split('')
  arr.forEach((item: string) => {
    if (item == '.') {
      integer = false
    }
  })

  // console.log(integer)

  for (let i = 0; i <= 55; i++) {
    timer = setTimeout(() => {
      if (el) {
        // console.log(i * counter * 0.02)
        nowCount = i * counter * 0.02 <= counter ? i * counter * 0.02 : counter
        if (integer) {
          nowCount = nowCount.toFixed(0)
        } else {
          nowCount = nowCount.toFixed(2)
        }

        el.innerHTML = nowCount
      }
    }, step)
    step += wait
  }
  clearTimeout(timer)
  // import setTimeout是异步，延迟时间需递增
}

　　3.Scoll(监控元素是否触定和触底)

import { ref } from 'vue'

const useScoll = (el: HTMLElement, time: number = 50) => {
  let isTop = ref<boolean>()
  let isBottom = ref<boolean>()
  let timer: any = null

  function scollFn() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      const scollTop = el.scrollTop
      const scollHeight = el.scrollHeight
      const clientHeight = el.clientHeight
      isTop.value = scollTop <= 50 ? true : false
      isBottom.value = scollTop + clientHeight + 20 >= scollHeight
    }, time)
  }
  scollFn()

  function offScoll() {
    el.removeEventListener('scroll', scollFn)
  }

  el.addEventListener('scroll', scollFn)

  return {
    isTop,
    isBottom,
    offScoll,
  }
}

export default useScoll

　　4.读取input上传的本地图片（转成base64）

export const useReadFilePath = (file: any) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onloadend = (res: any) => {
      const result = res.target.result
      resolve(result)
    }
  })
}

　　5.图片懒加载

import { ref } from 'vue'

const useInClient = (el: HTMLElement, imgEl: HTMLImageElement, time: number = 50) => {
  let isIn = ref<boolean>(false)
  let timer: any = ''

  function scollFn() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      const scollTop = el.scrollTop
      const offset = imgEl.offsetTop
      const clientHeight = el.clientHeight
      //
      isIn.value = scollTop + clientHeight >= offset - 50 ? true : false
      if (isIn.value == true) {
        imgEl.src = imgEl.getAttribute('data-url') as string
      }
      console.log(isIn.value)
    }, time)
  }
  scollFn()

  function offScoll() {
    el.removeEventListener('scroll', scollFn)
  }

  el.addEventListener('scroll', scollFn)

  return {
    isIn,
    offScoll,
  }
}

export default useInClient

　　6.防抖和节流

　　1.每次进入函数后先清除定时器，再重新赋值定时器，可防止scoll、resize等频繁触发

　　2.每次进入函数后先判断有无定时器，有则return退出函数，没有则进入函数执行业务，可防止用户快速多次点击业务按钮