前端日常随记

 　　1.好看的滚动条样式

/* 滚动条背景色 */
::-webkit-scrollbar-track {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: #efefef;
}
/* 默认滚动条色 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #99abd2;
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: #99abd2;
}
/* 鼠标经过滚动条颜色 */
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #99abd2;
}
/* 鼠标按下滚动条颜色 */
::-webkit-scrollbar-thumb:vertical:active {
  background-color: #99abd2;
}

　　2.毫秒转年月日时分秒显示

/**
 * @description 将毫秒数转换为易读的时间格式
 * @param {*} ms 毫秒数
 * @returns {string} 时间字符串
 */
const msToNiceTime = (ms) => {
  if (ms + '' === '0' || isEmptyStr(ms)) return ms
  const milliseconds = Math.floor(ms % 1000)
  const seconds = Math.floor((ms / 1000) % 60)
  const minutes = Math.floor((ms / (1000 * 60)) % 60)
  const hours = Math.floor((ms / (1000 * 60 * 60)) % 24)
  const days = Math.floor(ms / (1000 * 60 * 60 * 24))
  return `${days > 0 ? days + '天 ' : ''}${hours > 0 ? hours + '小时 ' : ''}${
    minutes > 0 ? minutes + '分钟 ' : ''
  }${seconds > 0 ? seconds + '秒' : ''}${
    milliseconds > 0 ? milliseconds + '毫秒' : ''
  }`
}

 　　3.async await的错误处理

/**
 * async请求，统一处理返回信息
 */
const awaitWrap = (promise) => {
  return promise.then((res) => [res, null]).catch((err) => [null, err])
}

　　4.字符串转文本

/**
 * 下载字符串为文本文件
 * @param { Object } str 字符串
 * @param { String } fileName 文件名
 */
const saveStrAsTextFile = (str, fileName) => {
  try {
    const blob = new Blob([str], { type: 'text/plain' })
    if ('download' in document.createElement('a')) {
      var link = document.createElement('a')
      var href = window.URL.createObjectURL(blob)
      link.style.display = 'none'
      link.href = href
      link.download = decodeURIComponent(fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(href)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  } catch (error) {
    console.error(error)
  }
}

　　5.js复制文本

// 创建临时的输入框元素
const createElement = (text) => {
  const isRTL = document.documentElement.getAttribute('dir') === 'rtl'
  const element = document.createElement('textarea')
  // 防止在ios中产生缩放效果
  element.style.fontSize = '12pt'
  // 重置盒模型
  element.style.border = '0'
  element.style.padding = '0'
  element.style.margin = '0'
  // 将元素移到屏幕外
  element.style.position = 'absolute'
  element.style[isRTL ? 'right' : 'left'] = '-9999px'
  // 移动元素到页面底部
  const yPosition = window.pageYOffset || document.documentElement.scrollTop
  element.style.top = `${yPosition}px`
  // 设置元素只读
  element.setAttribute('readonly', '')
  element.value = text
  document.body.appendChild(element)
  return element
}

/**
 * @description 复制文本
 * @param {*} text
 * @returns {promise}
 */
const copyText = (text) => {
  return new Promise((resolve) => {
    const element = createElement(text)
    element.select()
    element.setSelectionRange(0, element.value.length)
    document.execCommand('copy')
    element.remove()
    resolve()
  })
}

6.js下载文件流并处理报错信息

/**
 * 下载文件
 * @param { Object } data 文件流
 * @param { String } fileName 文件名
 */
const downloadFile = (data, fileName) => {
  try {
    const { type } = data
    const blob = new Blob([data], { type })
    if ('download' in document.createElement('a')) {
      var link = document.createElement('a')
      var href = window.URL.createObjectURL(blob)
      link.style.display = 'none'
      link.href = href
      link.download = decodeURIComponent(fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(href)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  } catch (error) {
    console.error(error)
  }
}

/**
 * 处理下载报错信息
 * @param {data} data Blob 格式的数据
 */
const handleDownloadError = (data) => {
  try {
    // 由于响应头设置为 Blob，导出失败时，返回的json数据也是 Blob 格式，需要转换为 json
    const reader = new FileReader()
    reader.onload = function () {
      // 将会打印json格式
      // console.log(JSON.parse(reader.result))
      const { message } = JSON.parse(reader.result)
      Message.error(message)
    }
    // 如果转换完中文出现乱码，可以设置一下代码
    reader.readAsText(data, 'utf-8')
  } catch (error) {
    console.error('error', error)
  }
}