vue一些utils

utils

  • 1.blob2base64
  • 2.base64 字符串之间的转化
  • 3格式化日期相关
  • 4防抖与节流
  • 5截取地址栏参数

1.blob2base64

let blob2base64 = async (blobData, type = 'image/jpeg') => {
  let blob = new Blob([blobData], { type: type })
  let fileReader = new FileReader()
  let result = await new Promise((resolve, reject) => {
    fileReader.readAsDataURL(blob)
    fileReader.onload = (e) => {
      resolve(e.target.result)
    }
  })

  return result
}
export default {
  blob2base64
}

vue一些utils_第1张图片
vue一些utils_第2张图片
或者这样:
vue一些utils_第3张图片

2.base64 字符串之间的转化

const addBase64 = (str) => {
  // 对字符串进行编码
  const encode = encodeURI(str);
  // 对编码的字符串转化base64
  const base64 = btoa(encode);
  return base64;
};
// base64转字符串
const transBase64 = (base64) => {
  // 对base64转编码
  const decode = atob(base64);
  // 编码转字符串
  const str = decodeURI(decode);
  return str;
};
export {
   addBase64, transBase64,
};

3格式化日期相关

/**
 * @description 转UTC时间格式
 * @param {time} time如果是'start'表示本年度的1月1日00:00:00 ,如果是'end'表示本年度的12月31日23:59:59 ,time也可以是Date构造函数的实参
 * @return String UTC格式的时间字符串
 */
export const formatDateToUtc = (time) => {
  const curDate = new Date()
  const curYear = curDate.getFullYear()
  if (time === 'start') {
    return new Date(`${curYear}-1-1`).toISOString()
  } else if (time === 'end') {
    return new Date(`${curYear + 1}-1-1`).toISOString()
  } else {
    return new Date(time).toISOString()
  }
}
/**
 * @description UTC时间转正常时间
 */
export const dateFormat = (timer) => {
  let date = new Date(timer)
  let y = String(date.getFullYear()).padStart(4, 0)
  let M = String(date.getMonth() + 1).padStart(2, 0)
  let d = String(date.getDate()).padStart(2, 0)
  let h = String(date.getHours()).padStart(2, 0)
  let m = String(date.getMinutes()).padStart(2, 0)
  let s = String(date.getSeconds()).padStart(2, 0)
  return `${y}-${M}-${d} ${h}:${m}:${s}`
}

**时间戳转正常日期**
function dateFormat(time, format = "YYYY-MM-DD HH:mm:ss") {
  let date = new Date(time)
  const config = {
    YYYY: date.getFullYear(),
    MM: date.getMonth() + 1,
    DD: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    ss: date.getSeconds()
  };
  for (const key in config) {
    format = format.replace(key, config[key]);
  }
  return format;
}
console.log(dateFormat(1588754368262, "YYYY年MM月DD日"));

4防抖与节流

    
/**
 * @description 防抖
 */
 function debance(fn, delay) {
  let timer = null;
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

window.addEventListener(
  "scroll",
  debance(() => {
    console.log(111);
  }, 1000)
);
/**  * @description 节流  */

//方法一:设置一个标志
    function throttle(fn, delay) {
      let flag = true;
      return () => {
        if (!flag) return;
        flag = false;
        timer = setTimeout(() => {
          fn();
          flag = true;
        }, delay);
      };
    }
    //方法二:使用时间戳
  function throttle(fn, delay) {
      let startTime=new Date()
      return () => {
        let endTime=new Date()
        if (endTime-startTime>=delay){
          fn()
          startTime=endTime
        }else{
          return
        }
      };
    }
    window.addEventListener(
      "scroll",
      throttle(() => {
        console.log(111);
      }, 1000)
    );


5截取地址栏参数

    getQueryString: function(key) {
        var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)')
        var result = window.location.search.substr(1).match(reg)
        return result ? decodeURIComponent(result[2]) : null
    }

你可能感兴趣的:(Vue)