前端工具函数、公用样式

一、通用样式

1. 细滚动条

在出现滚动条的容器加上 scroll-style 类

.scroll-style::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}
.scroll-style::-webkit-scrollbar-thumb {
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .3);
  background-color: #e9e8e8;
}
.scroll-style::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px transparent;
  -webkit-box-shadow: inset 0 0 6px transparent;
  border-radius: 2px;
  background-color: transparent;
}

二、工具函数

1. 封装axios

import axios from 'axios'

const request = axios.create({
  // custom config here
})

request.interceptors.response.use(
  response => {
    // do someting on response
    if (response.data.code) {
      return Promise.reject(response.data.msg)
    }
    return response
  },
  error => {
    // do someting on error
    return Promise.reject(error.response.data) // => gives me the server resonse
  }
)

export default request

2. 格式化货币

  /**
   * 将xxxxx.xx元格式化成x.xx万元
   * @param {Number} num number
   * @param {String} unit unit
   * @return {String} 格式化后的数据
   */
  export function formatCapital (num, unit) {
    unit = unit || ''

    /**
     * xxxxxxx -> x,xxx,xxx
     * @param {Number} num num
     * @return {String} 格式化后数据
     */
    function format (num) {
      return (num.toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
    }
    if (parseFloat(num) === 0) {
      return '未公布'
    }
    if (isNaN(num)) {
      return '--'
    }
    if (num) {
      if (num < 10000) {
        return format(parseFloat(num)) + unit
      }
      return format(num / 10000) + ' 万' + unit
    }

    return '--'
  }

3. 格式化日期

  /**
 *  1.将格式为'yyyy-MM-dd 00:00:00'截取为'yyyy-MM-dd';
 *  2.将'yyyy-M-d'转化为'yyyy-MM-dd';
 *  3.3.将'yyyy-MM-dd'原样输出;
 *
 *  @param {string} value 参数
 *  @return {string} 返回
 */
export function spliceDate(value) {
  if (value !== '' && typeof value === 'string') {
      var array = value.split(' ');
      var dateNums = array[0].split('-');
      var formatDate = dateNums[0] + '';
      for (var i = 1, l = dateNums.length; i < l; i++) {
          formatDate += '-';
          if (Number(dateNums[i]) < 10 && dateNums[i].charAt(0) !== '0') {
              formatDate += '0';
          }
          formatDate += dateNums[i];
      }
      // 如果时分秒部分,不是'00:00:00',则保留
      if (array[1] && array[1] !== '00:00:00' && array[1] !== '00:00') {
          formatDate += ' ' + array[1];
      }
      return formatDate;
  }
  return '--';
};

4. 从地址栏中获取query object

function getQueryObj () {
    var queryObj = {};
    var queryString = window.location.href.split('?')[1];
    var arr = queryString.split('&');

    for (let item of arr) {
        var keyValue = item.split('=');
        var key = keyValue[0];
        var value = keyValue[1];
        queryObj[key] = value
    }

    return queryObj;
}

5. 空字符串''、null和undefined，认为是空值，0和false不是

function isEmptyValue(value) {
    if (value === '' || value === null || value === undefined) {
        return true
    } else {
        return false
    }
}

6. 对敏感字符逗号、尖括号进行转义,防止js注入

/**
 * @desc 对敏感字符逗号、尖括号进行转义,防止js注入
 * @param v { String } <script>alert("1")</script> 
 * */
function escapeValue(value) {
    var  entry = { "'": "&apos;", '"': '&quot;', '<': '&lt;', '>': '&gt;' };
    value = value.replace(/(['")-><&\\\/\.])/g, function ($0) { return entry[$0] || $0; });
    return value;
}