代码片段

axios拦截

import axios from 'axios';
let request = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 10000,
  headers: {},
  isShowMessage: true,
});
request.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);
request.interceptors.response.use(
  ({ data, config }) => {
    if (data.code == 0 || data.code == 200) return data.result;
    if (config.isShowMessage)
      //如果配置isShowMessage=true显示错误信息
      ElMessage({
        //提示错误消息
        message: data.message,
        type: 'error',
      });
    return Promise.reject(data); // 返回接口返回的错误信息,使用try catch捕获
  },
  (error) => {
    return Promise.reject(error);
  },
);
export default request;

判断文件类型是否是图片

/**
 * @description 判断文件类型是否是图片
 * @param {string} type 文件类型
 */
function isPicture(type) {
  if (type) return ['jpg', 'jpeg', 'png'].includes(type.toLowerCase());
}

判断文件类型是否是视频

/**
 * @description 判断文件类型是否是视频
 * @param {string} type 文件类型
 */
function isVideo(type) {
  if (type) return ['mp4', 'mov', 'mkv', 'avi'].includes(type.toLowerCase());
}

防抖

/**
 * @decription 防抖
 * @param {function} fn 延迟要执行的函数
 * @param {number} delay 默认时间为 300ms
 * @returns
 */
export function debounce(fn, delay = 300) {
  let timer = null;

  return async function (...args) {
    clearTimeout(timer);

    timer = setTimeout(async () => {
      await fn.apply(this, args);
    }, delay);
  };
}

节流

/**
 * @description节流
 * @param {function} fn 要执行的函数
 * @param {number} gapTime 间隔时间 默认：0
 * @returns
 */
function throttle(fn, gapTime) {
  let _lastTime = null;
  gapTime = gapTime || 0;

  return function () {
    let that = this,
      args = arguments,
      _nowTime = +new Date();
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn.apply(that, args);
      _lastTime = _nowTime;
    }
  };
}

比较数据是否一致

/**
 * 比较数据是否一致
 * @param {*} a
 * @param {*} b
 * @returns {boolean} 一致返回true 反之false
 */
function equals(a, b) {
  if (a === b) return true;
  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) return a === b;
  if (a.prototype !== b.prototype) return false;
  let keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;
  return keys.every((k) => equals(a[k], b[k]));
}

判断是否是数字

/**
 * @description -判断是否是数字
 * @param {*}
 * @return {boolean} 是数字返回true 反之false
 */
function isRealNum(num) {
  if (num === '' || num === null) {
    return false;
  }

  if (typeof num === 'number' && !isNaN(num)) {
    return true;
  }

  return false;
}

复制文本到剪切板

/**
 * 复制文本到剪切板
 * @param {string} text
 * @example
 * copyToClipboard('hello')
 */
const copyToClipboard = (text) => navigator.clipboard.writeText(text);

获取某个日期位于当年的第几天

/**
 * 获取某个日期位于当年的第几天
 * @param {Date} date
 * @returns {number}
 * @example
 * getDayOfYear(new Date(2022,10,22)) // 331
 */
const getDayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

将rgb颜色灰度化(基于光感加权平均)

/**
 * 将rgb颜色灰度化(基于光感加权平均)
 * @param {number} r
 * @param {number} g
 * @param {number} b
 * @returns {number}
 * @example
 * rgbToGray(50, 100, 150) // 92.98
 */
const rgbToGray = (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 * b;

解析URL中参数

/**
 * 解析URL中参数
 * @param {string} url
 * @returns {object}
 * @example
 * parseQuery('?a=1&b=2') // {a: 1, b: 2}
 */
const parseQuery = (url) => {
  q = {};
  url.replace(/([^?&=]+)=([^&]*)/g, (_, k, v) => (q[k] = v));
  return q;
};

对象属性转url参数

/**
 * 对象属性转url参数
 * @param {object} options 传入一个对象
 * @returns {string} 返回一个string类型
 */
const formatOptions = (options) => {
  var urlOptions = "";
  for (var i in options) {
    urlOptions += i + "=" + options[i] + "&";
  }
  urlOptions = urlOptions.slice(0, urlOptions.length - 1);
  return urlOptions;
};

筛选对象属性

/**
 * 筛选对象属性
 * @param {object} obj
 * @param {string[]} props
 * @returns {object}
 * @example
 * pick({a: 1, b: 2, c: 3}, 'a', 'c') // {a: 1, c: 3}
 */
const pick = (obj, ...props) =>
  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));

随机HEX颜色

/**
 * 随机HEX颜色
 * @returns {string}
 * @example
 * randomColor() // '#ffffff'
 */
const randomColor = () =>
  "#" +
  Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, "0");

去掉字符串中的元素标记

/**
 * 去掉字符串中的元素标记
 * @param {string} fragment
 * @returns {string}
 * @example
 * removeTag('<p>hello</p>') // 'hello'
 */
const removeTag = (fragment) =>
  new DOMParser().parseFromString(fragment, "text/html").body.textContent || "";

数据库字段名称下划线转小驼峰

function toCamelCase(str) {
  return str.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());
}
// 递归地将对象或数组的键转换为小驼峰格式
function convertToCamelCase(input) {
  if (Array.isArray(input)) {
    return input.map((item) => convertToCamelCase(item));
  } else if (input !== null && typeof input === 'object') {
    return Object.keys(input).reduce((acc, key) => {
      const camelCaseKey = toCamelCase(key);
      acc[camelCaseKey] = convertToCamelCase(input[key]);
      return acc;
    }, {});
  }
  return input;
}

兼容ios文件下载

   /**
     * @decription 下载兼容ios
     * @param {object} value
     * @param {object} value.filePath -文件地址
     * @param {object} value.fileName - 文件名
     */
    function download(value) {
      let link = document.createElement('a');
      link.href = value.filePath;
      link.download = value.fileName;
      // 在IOS上模拟点击链接
      if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent(
          'click',
          true,
          true,
          window,
          1,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
        link.dispatchEvent(event);
      } else {
        // 在其他设备上直接下载文件
        link.click();
      }
    }

图片处理

图片压缩

/**
* @decription 图片压缩
* @parma {Object} file 图片文件对象
* @parma {number} quality 压缩的图片质量0-1
* @return {Promise<File>} 返回文件对象
*/
function compressImage(file, quality = 0.1) {
      return new Promise((resolve, reject) => {
        let img = new Image();
        let reader = new FileReader();

        // 读取文件为DataURL
        reader.onload = function (e) {
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);

        // 图片加载完成后执行
        img.onload = () => {
          let canvas = document.createElement('canvas');
          let ctx = canvas.getContext('2d');

          // 计算新的宽度和高度
          let width = img.width;
          let height = img.height;

          // 设置canvas的宽度和高度
          canvas.width = width;
          canvas.height = height;

          // 绘制图片到canvas
          ctx.drawImage(img, 0, 0, width, height);

          // 将canvas的内容转回dataURL
          // let dataUrl = canvas.toDataURL(file.type, quality); // quality范围0到1
          canvas.toBlob(
            (blob) => {
              if (!blob) {
                reject(new Error('Failed to create Blob'));
                return;
              }

              // 创建新的File对象
              const compressedFile = new File([blob], file.name, {
                type: file.type,
              });

              resolve(compressedFile);
            },
            file.type,
            quality
          );
          // resolve(dataUrl);
        };

        img.onerror = reject;
      });
    },

图片转base64

/**
* @description - 图片文件对象转图片base64
* @param {Object} file 图片文件对象
* @return {Promise<string>} 图片的base64
*/
function fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          console.log(event.target.result, 'event.target.result');
          resolve(event.target.result);
        };
        reader.onerror = reject;
        // 将File对象以DataURL形式读取，这会返回一个包含Base64编码的字符串
        reader.readAsDataURL(file);
      });
    },