基於vue項目的js工具方法匯總

以下是個人在vue項目的開發過程中經常會用到的一些公共方法，在此進行匯總，方便以后及有需要的朋友查看~

let util = {};

 

/**
 * @description 日期格式化
 * @param {Date} date 日期
 * @param {String} fmt 日期格式 eg: yyyy-MM-dd hh:mm:ss
 */
util.dateFormat = function (date, fmt) {
  var o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小時
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    'S': date.getMilliseconds() // 毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
    }
  }
  return fmt;
};

 

/**
 * @description 文件下載
 * @param {Object} data  數據 
 * @param {String} fileName 下載文件名
 */
util.download = function (data, fileName) {
  //創建一個blob對象,file的一種
  let blob = new Blob([data], { type: 'application/x-xls' });
  if ('download' in document.createElement('a')) { // 非IE下載
    let link = document.createElement('a');
    if (window.URL) {
      link.href = window.URL.createObjectURL(blob);
    } else {
      link.href = window.webkitURL.createObjectURL(blob);
    }
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    link.remove();
  }else { // IE10+下載
    navigator.msSaveBlob(blob, fileName);
  }
};

 

/**
 * @description 校驗導入execl格式
 * @param {file} file 導入文件對象
 */
util.validateExecl = function(file) {
  const isXLS = file.type === 'application/vnd.ms-excel';
  const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  if (!isXLS && !isXLSX) {
    this.$message.error('只支持導入execl文件');
    return false;
  }
};

 

/**
 * @description 校驗上傳圖片格式和大小
 * @param {file} file 導入文件對象
 */
util.validateImage = function(file) {
  const isPNG = file.type.toLowerCase() === 'image/png';
  const isJPG = file.type.toLowerCase() === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG && !isPNG) {
    this.$message.error('上傳圖片只能是JPG或PNG格式!');
    return false;
  }
  if (!isLt2M) {
    this.$message.error('上傳圖片大小不能超過 2M!');
    return false;
  }
};

 

AES加密/解密，需要先安裝依賴 crypto-js。注：具體的選項參數可自行百度了解噢

// 自定義密鑰
const key = CryptoJS.enc.Utf8.parse('ljycykxbchsbqtcy')
// 加密
util.encrypt = function(str) {
  let srcs = CryptoJS.enc.Utf8.parse(str)
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})
  return encrypted.toString()
};
// 解密
util.decrypt = function(str) {
  let decrypt = CryptoJS.AES.decrypt(str, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})
  return CryptoJS.enc.Utf8.stringify(decrypt).toString()
};

 

MD5加密，需要先安裝依賴 js-md5

// 在main.js中添加以下代碼
import md5 from 'js-md5'；
Vue.prototype.$md5 = md5；

// str為需要加密字段
let md5Str = this.$md5(str);

 

/**
 * @description 倒計時
 * @param {} time 綁定展示的倒計時時間,初始值60s
 */
let timer = null
timer = setInterval(function() {
  if(this.time > 0) {
    this.time--
  }else {
    clearInterval(timer)
  }
}, 1000)

 

轉換file文件對象為base64字符串

let reader = new FileReader()
// file為通過上傳組件選擇的文件對象
reader.readAsDataURL(file)
reader.onload = function(e) {
  let base64 = e.target.result
}

 

/**
 * @description 四舍五入
 * @param {Number} num 數值
 * @param {Number} digits 小數位數
 */
util.round = function (num, digits) {    
  return Math.round(num * Math.pow(10, digits)) / Math.pow(10, digits);
};

 

/**
 * @description 回到頂部
 */
util.backTop= function () {    
  let timer = setInterval(() => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-scrollTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
    if(scrollTop === 0) {
      clearInterval(timer);
    }
  }, 10);
};

 

/**
 * @description 數組對象排序
 * @param {Array} array 數組
 * @param {String} prop 排序字段
 * @param {String} order 升序或降序, asc:升序|desc:降序
 */
sortData(array, prop, order) {
  array.sort(function(item1, item2){
    let value1 = item1[prop];
    let value2 = item2[prop];
    if(value1 < value2) {
      return order == 'desc' ? 1 : -1; 
    }else if (value1 > value2) {
      return order == 'desc' ? -1 : 1;
    }else {
      return 0;
    }
  });
}

 

/**
 * @description 快速排序
 * @param {Array} arr 數組
 */
quickSort(arr) {
    if(arr.length <= 1) {
      return arr;
    }
    var index = Math.floor(arr.length / 2);
    var pivot = arr.splice(index, 1)[0];
    var left = [], right = [];
    for(var i = 0; i < arr.length; i++) {
      if(arr[i] < pivot) {
        left.push(arr[i]);
      }else {
        right.push(arr[i]);
      }
    }
    return quickSort(left).concat([pivot], quickSort(right));
}

 

export default util;

 

持續更新中~~