美文网首页
一个vue的小工具库

一个vue的小工具库

作者: 白羊座的黄同学 | 来源:发表于2018-11-21 15:56 被阅读0次

最近使用vue进行开发,于是动手封装了一个vue的小型工具库,期待能够继续完善

/**
 * 工具模块,不依赖第三方代码
 */
var ak = {};

ak.Base_URL = 'http://10.0.2.210/';

/**
 * 工具模块,不依赖第三方代码
 * 包含:类型判断
 */
ak.Utils = {
  /**
   * 是否为JSON字符串
   * @param {String}
   * @return {Boolean}
   */
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        if (str.indexOf('{') > -1) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
    return false;
  },
  /**
   * 去除字符串首尾两端空格
   * @param {String} str
   * @return {String}
   */
  trim(str) {
    if (str) {
      return str.replace(/(^\s*)|(\s*$)/g, '');
    } else {
      return '';
    }
  },
  /**
   * 脱敏
   * @param {String} value 脱敏的对象
   * @return {String}
   */
  desensitization: function(value) {
    if (value) {
      var valueNew = '';
      const length = value.length;
      // 脱敏:从倒数第五位开始向前四位脱敏
      valueNew = value.split('').map((number, index) => {
        const indexMin = length - 8;
        const indexMax = length - 5;
        if (index >= indexMin && index <= indexMax) {
          return '*';
        } else {
          return number;
        }
      }).join('');
      return valueNew;
    } else {
      return '';
    }
  },

  /**
   * 判断是否Array对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isArray: function(value) {
    return toString.call(value) === '[object Array]';
  },

  /**
   * 判断是否日期对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isDate: function(value) {
    return toString.call(value) === '[object Date]';
  },

  /**
   * 判断是否Object对象
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isObject: function(value) {
    return toString.call(value) === '[object Object]';
  },

  /**
   * 判断是否为空
   * @param {Object} value 判断的对象
   * @return {Boolean}
   */
  isEmpty: function(value) {
    return value === null || value === undefined || value === '' || (this.isArray(value) && value.length === 0);
  },

  /**
   * 判断是否移动电话
   * @param {Number} value 判断的值
   * @return {Boolean}
   */
  isMobilePhone: function(value) {
    value = Number.parseInt(value);
    // 1)是否非数字
    if (Number.isNaN(value)) {
      return false;
    }

    // 2)时候移动电话
    return /^1[3|4|5|7|8|9|6][0-9]\d{4,8}$/.test(value);
  },

  /**
   * 判断是否为邮箱
   * @param {String} value 判断的值
   * @return {Boolean}
   */
  isEmail: function(value) {
    return /^[a-zA-Z\-_0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+$/.test(value);
  },

  /**
   * 转换服务器请求的对象为Js的对象:包含首字母转换为小写;属性格式转换为Js支持的格式
   * @param {Object} en 服务器的获取的数据对象
   */
  transWebServerObj: function(en) {
    if (toString.call(en) == '[object Array]') {
      for (var i = 0, len = en.length; i < len; i++) {
        ak.Utils.transWebServerObj(en[i]);
      }
    } else {
      for (var propertyName in en) {
        /*
         // 1.创建一个小写的首字母属性并赋值:ABC => aBC
         var newPropertyName = propertyName.charAt(0).toLowerCase() + propertyName.substr(1);
         en[newPropertyName] = en[propertyName];
         */
        var tmpName = propertyName;
        // 2.判断此属性是否为数组,若是就执行递归
        if (toString.call(en[tmpName]) == '[object Array]') {
          for (var k = 0, leng = en[tmpName].length; k < leng; k++) {
            ak.Utils.transWebServerObj(en[tmpName][k]); // 数组里的每个对象再依次进行转换
          }
        } else if (toString.call(en[tmpName]) == '[object Object]') {
          ak.Utils.transWebServerObj(en[tmpName]); // 若属性的值是一个对象,也要进行转换
        } else {
          // 3.若不是其他类型,把此属性的值转换为Js的数据格式
          // 3.1)日期格式:后台为2015-12-08T09:23:23.917 => 2015-12-08 09:23:23
          if (new RegExp(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/).test(en[propertyName])) {
            //  en[propertyName] = new RegExp(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/).exec(en[propertyName])[0].replace('T', ' ');

            //  若为0001年,表示时间为空,就返回''空字符串
            if (en[propertyName].indexOf('0001') >= 0) {
              en[propertyName] = '';
            }
          } else if (toString.call(en[propertyName]) == '[object Number]' && new RegExp(/\d+[.]\d{3}/).test(en[propertyName])) {
            // 3.2)溢出的float格式:1.33333 = > 1.33
            en[propertyName] = en[propertyName].toFixed(2);
          } else if (en[propertyName] == null) {
            // 3.3)null值返回空
            en[propertyName] = '';
          } else if (
            ['imgPath', 'loopImgPath', 'clubIcon', 'headImgPath'].indexOf(propertyName) >= 0 &&
            en[propertyName] &&
            en[propertyName].length > 0
          ) {
            en[propertyName] = ak.Base_URL + en[propertyName].replace('..', '');
          }
        }
      }
    }
    return en;
  },

  /**
   *设置SessionStorage的值
   * @param key:要存的键
   * @param value :要存的值
   */
  setSessionStorage: function(key, value) {
    if (this.isObject(value) || this.isArray(value)) {
      value = this.toJsonStr(value);
    }
    sessionStorage[key] = value;
  },

  /**
   *获取SessionStorage的值
   * @param key:存的键
   */
  getSessionStorage: function(key) {
    var rs = sessionStorage[key];
    try {
      if (rs != undefined) {
        var obj = this.toJson(rs);
        rs = obj;
      }
    } catch (error) {}
    return rs;
  },

  /**
   * 清除SessionStorage的值
   * @param key:存的键
   */
  removeSessionStorage: function(key) {
    return sessionStorage.removeItem(key);
  },

  /**
   *设置LocalStorage的值
   * @param key:要存的键
   * @param value :要存的值
   */
  setLocalStorage: function(key, value) {
    if (this.isObject(value) || this.isArray(value)) {
      value = this.toJsonStr(value);
    }
    localStorage[key] = value;
  },

  /**
   *获取LocalStorage的值
   * @param key:存的键
   */
  getLocalStorage: function(key) {
    var rs = localStorage[key];
    try {
      if (rs != undefined) {
        var obj = this.toJson(rs);
        rs = obj;
      }
    } catch (error) {}
    return rs;
  },

  /**
   * 清除LocalStorage的值
   * @param key:存的键
   */
  removeLocalStorage: function(key) {
    return localStorage.removeItem(key);
  },

  /**
   * 对传入的时间值进行格式化。后台传入前台的时间有两种个是:Sql时间和.Net时间
   * @param {String|Date} sValue 传入的时间字符串
   * @param {dateFormat | bool} dateFormat  日期格式,日期格式:eg:'Y-m-d H:i:s'
   * @return {String} 2014-03-01 这种格式
   * @example
   * 1) Sql时间格式:2015-02-24T00:00:00
   * 2) .Net时间格式:/Date(1410744626000)/
   */
  getDateTimeStr: function(sValue, dateFormat) {
    if (dateFormat == undefined) {
      dateFormat = 'Y-m-d'; // 默认显示年月日
    }

    var dt;
    // 1.先解析传入的时间对象,
    if (sValue) {
      if (toString.call(sValue) !== '[object Date]') {
        // 不为Date格式,就转换为DateTime类型
        sValue = sValue + '';
        var timestr;
        if (sValue.indexOf('T') > 0) {
          // 1)格式:2015-02-24T00:00:00
          timestr = sValue.replace('T', ' ').replace(/-/g, '/'); // => 2015/02/24 00:00:00
          dt = new Date(timestr);
        } else if (sValue.indexOf('Date') >= 0) {
          // 2).Net格式:/Date(1410744626000)/
          // Convert date type that .NET can bind to DateTime
          // var date = new Date(parseInt(sValue.substr(6)));
          timestr = sValue.toString().replace(/\/Date\((\d+)\)\//gi, '$1');
          dt = new Date(Math.abs(timestr));
        } else {
          dt = new Date(sValue);
        }
      } else {
        dt = sValue;
      }
    }

    // 2.转换
    // 1)转换成对象 'Y-m-d H:i:s'
    var obj = {}; // 返回的对象,包含了 year(年)、month(月)、day(日)
    obj.Y = dt.getFullYear(); // 年
    obj.m = dt.getMonth() + 1; // 月
    obj.d = dt.getDate(); // 日期
    obj.H = dt.getHours();
    obj.i = dt.getMinutes();
    obj.s = dt.getSeconds();
    // 2.2单位的月、日都转换成双位
    if (obj.m < 10) {
      obj.m = '0' + obj.m;
    }
    if (obj.d < 10) {
      obj.d = '0' + obj.d;
    }
    if (obj.H < 10) {
      obj.H = '0' + obj.H;
    }
    if (obj.i < 10) {
      obj.i = '0' + obj.i;
    }
    if (obj.s < 10) {
      obj.s = '0' + obj.s;
    }
    // 3.解析
    var rs = dateFormat
      .replace('Y', obj.Y)
      .replace('m', obj.m)
      .replace('d', obj.d)
      .replace('H', obj.H)
      .replace('i', obj.i)
      .replace('s', obj.s);

    return rs;
  },

  /**
   * 把总秒数转换为时分秒
   */
  getSFM: function(seconds, dateFormat) {
    if (dateFormat == undefined) {
      dateFormat = 'H:i:s'; // 默认格式
    }
    var obj = {};
    obj.H = Number.parseInt(seconds / 3600);
    obj.i = Number.parseInt((seconds - obj.H * 3600) / 60);
    obj.s = Number.parseInt(seconds - obj.H * 3600 - obj.i * 60);
    if (obj.H < 10) {
      obj.H = '0' + obj.H;
    }
    if (obj.i < 10) {
      obj.i = '0' + obj.i;
    }
    if (obj.s < 10) {
      obj.s = '0' + obj.s;
    }

    // 3.解析
    var rs = dateFormat
      .replace('H', obj.H)
      .replace('i', obj.i)
      .replace('s', obj.s);
    return rs;
  },

  /**
   * 获取倒计时字符串
   * @param {Date} sValue 具体时间
   */
  getCountdownStr: function(sValue) {
    var dt = new Date();
    var rs = '';
    // 1.同一天
    if (this.isSomeDay(sValue, dt)) {
      var minutes = (dt.getTime() - sValue.getTime()) / 1000 / 60;
      if (minutes == 0) {
        rs = '刚刚';
      } else if (minutes < 60) {
        rs = Number.parseInt(minutes) + '分钟前';
      } else {
        rs = Number.parseInt(minutes / 60) + '小时前';
      }
    } else if (dt.getFullYear() == sValue.getFullYear() && dt.getMonth() == sValue.getMonth() && dt.getDate() - 1 == sValue.getDate()) {
      // 2.昨天
      rs = '昨天' + this.getDateTimeStr(sValue, 'H:i');
    } else {
      // 3.其他
      rs = this.getDateTimeStr(sValue, 'Y-m-d H:i');
    }
    return rs;
  },

  /**
   * 是否同一天
   */
  isSomeDay: function(dt1, dt2) {
    if (dt1.getFullYear() == dt2.getFullYear() && dt1.getMonth() == dt2.getMonth() && dt1.getDate() == dt2.getDate()) {
      return true;
    }
    return false;
  },

  /**
   * 对象转换为json字符串
   * @param  {jsonObj} jsonObj Json对象
   * @return {jsonStr} Json字符串
   */
  toJsonStr: function(jsonObj) {
    return JSON.stringify(jsonObj);
  },

  /**
   * 讲json字符串转换为json对象
   * @param {String} jsonStr Json对象字符串
   * @return {jsonObj} Json对象
   */
  toJson: function(jsonStr) {
    return JSON.parse(jsonStr);
  },

  /**
   * @private
   */
  getCookieVal: function(offset) {
    var endstr = document.cookie.indexOf(';', offset);
    if (endstr == -1) {
      endstr = document.cookie.length;
    }
    return unescape(document.cookie.substring(offset, endstr));
  },

  /**
   * 获取指定key的cookie
   * @param {String} key cookie的key
   */
  getCookie: function(key) {
    var arg = key + '=';
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    var j = 0;

    while (i < clen) {
      j = i + alen;
      if (document.cookie.substring(i, j) == arg) {
        return this.getCookieVal(j);
      }
      i = document.cookie.indexOf(' ', i) + 1;
      if (i === 0) {
        break;
      }
    }
    return null;
  },

  /**
   * 设置cookie
   * @param {String} key cookie的key
   * @param {String} value cookie的value
   */
  setCookie: function(key, value) {
    var argv = arguments;
    var argc = arguments.length;
    var expires = argc > 2 ? argv[2] : null;
    var path = argc > 3 ? argv[3] : '/';
    var domain = argc > 4 ? argv[4] : null;
    var secure = argc > 5 ? argv[5] : false;

    document.cookie =
      key +
      '=' +
      escape(value) +
      (expires === null ? '' : '; expires=' + expires.toGMTString()) +
      (path === null ? '' : '; path=' + path) +
      (domain === null ? '' : '; domain=' + domain) +
      (secure === true ? '; secure' : '');
  },

  /**
   * 是否含有特殊字符
   * @param  {String} value 传入的值
   * @return {Boolean} true 含有特殊符号;false 不含有特殊符号
   */
  isHaveSpecialChar: function(value) {
    var oldLength = value.length;
    var newLength = value.replace(/[`~!@#$%^&*_+=\\{}:"<>?\[\];',.\/~!@#¥%……&*——+『』:“”《》?【】;‘’,。? \[\]()()]/g, '').length;
    if (newLength < oldLength) {
      return true;
    }
    return false;
  },
  /*
  * 是否含有中文
  * @param  {String} temp 传入的值
  * @return {Boolean} true 含有中文符号;false 不含有中文符号
  * */
  isChinese: function(temp) {
    if (escape(temp).indexOf( "%u" ) < 0) {
      return false;
    } else {
      return true;
    }
  },

  /**
   * 合并数组内成员的某个对象
   * @param {Array} arr 需要合并的数组
   * @param {String} fieldName 数组成员内的指定字段
   * @param {String} split 分隔符,默认为','
   * @example
   * var arr = [{name:'tom',age:13},{name:'jack',age:13}] => (arr, 'name') => tom,jack
   */
  joinArray: function(arr, fieldName, split) {
    split = split == undefined ? ',' : split;
    var rs = arr.map((item) => {
      return item[fieldName];
    }).join(split);
    return rs;
  },
  /**
   * 去重数组内成员的某个对象
   * @param {Array} arr 需要合并的数组
   * @param {String} fieldName 数组成员内的指定字段
   * @param {String} split 分隔符,默认为','
   * @example
   * var arr = [{name:'tom',age:13},{name:'jack',age:13}] => (arr, 'name') => tom,jack
   */
  uniqueArray: function(arr, key) {
    var result = [arr[0]];
    for (var i = 1; i < arr.length; i++) {
      var item = arr[i];
      var repeat = false;
      for (var j = 0; j < result.length; j++) {
        if (item[key] == result[j][key]) {
          repeat = true;
          break;
        }
      }
      if (!repeat) {
        result.push(item);
      }
    }
    return result;
  }
};

/**
 * 消息模块
 * 包含:确认框、信息提示框
 */
ak.Msg = {
  /**
   * 提示框
   * msg {string} :信息内容
   */
  alert: function(msg) {
    window.utryVue.$messagebox('提示', msg);
  },

  /**
   * 确认框
   * msg {string} :信息内容
   * callback {function} :点击'确定'时的回调函数。
   */
  confirm: function(msg, callback) {
    window.utryVue
      .$messagebox({
        title: '提示',
        message: msg,
        showCancelButton: true
      })
      .then((action) => {
        if (action == 'confirm') {
          callback && callback();
        }
      });
  },

  /**
   * 显示正在加载
   * @param {String} title 显示的title
   */
  showLoading: function(title) {
    window.utryVue.$loading.close();
    title = title == undefined ? '加载中...' : title;
    window.utryVue.$loading({
      lock: true,
      text: title,
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },

  /**
   * 关闭正在加载
   */
  hideLoading: function() {
    window.utryVue.$loading.close();
  },

  /**
   * 自动消失的提示框
   * @param {String} msg 信息内容
   */
  toast: function(msg) {
    window.utryVue.$message({
      message: msg,
      type: 'error'
    });
  }
};

/**
 * 业务相关逻辑
 */
ak.BLL = {};

export default ak;

使用ES6导入就好了,不过部分依赖element组件库,当然只需要其他部分直接截取就好啦

相关文章

网友评论

      本文标题:一个vue的小工具库

      本文链接:https://www.haomeiwen.com/subject/aoecqqtx.html