vue/js 常用的通用方法_vue项目编写js函数

/**
 * 过滤对象中为空的属性
 * @param obj
 * @returns {*}
 */
export function filterObj(obj) {
  if (!(typeof obj == 'object')) {
    return;
  }

  for ( let key in obj) {
    if (obj.hasOwnProperty(key)
      && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
      delete obj[key];
    }
  }
  return obj;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/**
 * 时间格式化
 * @param value
 * @param fmt
 * @returns {*}
 */
export function formatDate(value, fmt) {
  let regPos = /^\d+(\.\d+)?$/;
  if(regPos.test(value)){
    //如果是数字
    let getDate = new Date(value);
    let o = {
      'M+': getDate.getMonth() + 1,
      'd+': getDate.getDate(),
      'h+': getDate.getHours(),
      'm+': getDate.getMinutes(),
      's+': getDate.getSeconds(),
      'q+': Math.floor((getDate.getMonth() + 3) / 3),
      'S': getDate.getMilliseconds()
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let 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;
  }else{
    //TODO
    value = value.trim();
    return value.substr(0,fmt.length);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/**
 * 深度克隆对象、数组
 * @param obj 被克隆的对象
 * @return 克隆后的对象
 */
export function cloneObject(obj) {
  return JSON.parse(JSON.stringify(obj))
}
1
2
3
4
5
6
7
8

/**
 * 随机生成数字
 *
 * 示例：生成长度为 12 的随机数：randomNumber(12)
 * 示例：生成 3~23 之间的随机数：randomNumber(3, 23)
 *
 * @param1 最小值 | 长度
 * @param2 最大值
 * @return int 生成后的数字
 */
export function randomNumber() {
  // 生成 最小值 到 最大值 区间的随机数
  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  if (arguments.length === 1) {
    let [length] = arguments
  // 生成指定长度的随机数字，首位一定不是 0
    let nums = [...Array(length).keys()].map((i) => (i > 0 ? random(0, 9) : random(1, 9)))
    return parseInt(nums.join(''))
  } else if (arguments.length >= 2) {
    let [min, max] = arguments
    return random(min, max)
  } else {
    return Number.NaN
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/**
 * 随机生成字符串
 * @param length 字符串的长度
 * @param chats 可选字符串区间（只会生成传入的字符串中的字符）
 * @return string 生成的字符串
 */
export function randomString(length, chats) {
  if (!length) length = 1
  if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm'
  let str = ''
  for (let i = 0; i < length; i++) {
    let num = randomNumber(0, chats.length - 1)
    str += chats[num]
  }
  return str
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 * 随机生成uuid
 * @return string 生成的uuid
 */
export function randomUUID() {
  let chats = '0123456789abcdef'
  return randomString(32, chats)
}
1
2
3
4
5
6
7
8

/**
 * 简单实现防抖方法
 *
 * 防抖(debounce)函数在第一次触发给定的函数时，不立即执行函数，而是给出一个期限值(delay)，比如100ms。
 * 如果100ms内再次执行函数，就重新开始计时，直到计时结束后再真正执行函数。
 * 这样做的好处是如果短时间内大量触发同一事件，只会执行一次函数。
 *
 * @param fn 要防抖的函数
 * @param delay 防抖的毫秒数
 * @returns {Function}
 */
export function simpleDebounce(fn, delay = 100) {
  let timer = null
  return function () {
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//时间过滤器
function dCreateTime(t1, spe) {
    spe = spe || '-';
    const time = new Date(t1);
    let year = time.getFullYear();
    let month = time.getMonth();
    month = month < 10 ?'0' + month : month;
    let day = time.getDate();
    day = day < 10 ?'0' + day : day;
    if (t1 == '') {
        return ''
    }else {
        return year + spe + month + spe + day;
    }
}
function transParams(data) {
    let params = new URLSearchParams()
    for (let item in data) {
      params.append(item, data['' + item + ''])
    }
    return params
}
export {
    dCreateTime,
    transParams
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//判断是否IE<11浏览器
export function isIE() {
  return navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1

}

export function isIE11() {
  return navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1
}

//判断是否IE的Edge浏览器
export function isEdge() {
  return navigator.userAgent.indexOf('Edge') > -1 && !isIE()
}

export function getIEVersion() {
  let userAgent = navigator.userAgent //取得浏览器的userAgent字符串
  let isIE = isIE()
  let isIE11 = isIE11()
  let isEdge = isEdge()

  if (isIE) {
    let reIE = new RegExp('MSIE (\\d+\\.\\d+);')
    reIE.test(userAgent)
    let fIEVersion = parseFloat(RegExp['$1'])
    if (fIEVersion === 7 || fIEVersion === 8 || fIEVersion === 9 || fIEVersion === 10) {
      return fIEVersion
    } else {
      return 6//IE版本<7
    }
  } else if (isEdge) {
    return 'edge'
  } else if (isIE11) {
    return 11
  } else {
    return -1
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

全局过滤器 filter.js
import Vue from "vue";
import * as dayjs from "dayjs";

Vue.filter('NumberFormat', function (value) {
  if (!value) {
    return '0'
  }
  let intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
  return intPartFormat
})

Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return dayjs(dataStr).format(pattern)
})

Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return dayjs(dataStr).format(pattern)
})

/** 字符串超长截取省略号显示 */
Vue.filter('ellipsis', function (value, vlength = 25) {
  if(!value){
    return "";
  }
  console.log('vlength: '+ vlength);
  if (value.length > vlength) {
    return value.slice(0, vlength) + '...'
  }
  return value
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * 根据时间戳判断过去多长时间
 */
export function timeFormat(time) {
  if (time > 0) {
      var result
      time = parseInt(time);
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - time;
      if (diffValue < 0) {
          return
      }
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      if (monthC >= 1) {
          if (monthC <= 12) {
              result = "" + parseInt(monthC) + "月前";
          } else {
              result = "" + parseInt(monthC / 12) + "年前";
          }
      } else if (weekC >= 1) {
          result = "" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
          result = "" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
          result = "" + parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
          result = "" + parseInt(minC) + "分钟前";
      } else {
          result = "刚刚";
      }
      return result
  } else {
      return '';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/**
 * 触发 window.resize
 */
export function triggerWindowResizeEvent() {
  let event = document.createEvent('HTMLEvents')
  event.initEvent('resize', true, true)
  event.eventType = 'message'
  window.dispatchEvent(event)
}
1
2
3
4
5
6
7
8
9

/**
 * 下划线转驼峰
 * @param string
 * @returns {*}
 */
export function underLine2CamelCase(string){
  return string.replace( /_([a-z])/g, function( all, letter ) {
    return letter.toUpperCase();
  });
}
1
2
3
4
5
6
7
8
9
10

/**
 * 使一个值永远不会为（null | undefined）
 *
 * @param value 要处理的值
 * @param def 默认值，如果value为（null | undefined）则返回的默认值，可不传，默认为''
 */
export function neverNull(value, def) {
  return value == null ? (neverNull(def, '')) : value
}
1
2
3
4
5
6
7
8
9

//  算农历日期 
export function ChineseCalendar(dateObj){
  this.dateObj = (dateObj != undefined) ? dateObj : new Date();
  this.SY = this.dateObj.getFullYear();
  this.SM = this.dateObj.getMonth();
  this.SD = this.dateObj.getDate();
      this.lunarInfo = [0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
          0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
          0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
          0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
          0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
          0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,
          0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
          0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,
          0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
          0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
          0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
          0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
          0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
          0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
          0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,
          0x14b63];

  //传回农历 y年闰哪个月 1-12 , 没闰传回 0
  this.leapMonth = function(y){
      return this.lunarInfo[y - 1900] & 0xf;
  };
  //传回农历 y年m月的总天数
  this.monthDays = function(y, m){
      return (this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29;
  };
  //传回农历 y年闰月的天数
  this.leapDays = function(y){
      if (this.leapMonth(y)) {
          return (this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29;
      }
      else {
          return 0;
      }
  };
  //传回农历 y年的总天数
  this.lYearDays = function(y){
      var i, sum = 348;
      for (i = 0x8000; i > 0x8; i >>= 1) {
          sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0;
      }
      return sum + this.leapDays(y);
  };
  //算出农历, 传入日期对象, 传回农历日期对象
  //该对象属性有 .year .month .day .isLeap .yearCyl .dayCyl .monCyl
  this.Lunar = function(dateObj){
      var i, leap = 0, temp = 0, lunarObj = {};
      var baseDate = new Date(1900, 0, 31);
      var offset = (dateObj - baseDate) / 86400000;
      lunarObj.dayCyl = offset + 40;
      lunarObj.monCyl = 14;
      for (i = 1900; i < 2050 && offset > 0; i++) {
          temp = this.lYearDays(i);
          offset -= temp;
          lunarObj.monCyl += 12;
      }
      if (offset < 0) {
          offset += temp;
          i--;
          lunarObj.monCyl -= 12;
      }
     
      lunarObj.year = i;
      lunarObj.yearCyl = i - 1864;
      leap = this.leapMonth(i);
      lunarObj.isLeap = false;
      for (i = 1; i < 13 && offset > 0; i++) {
          if (leap > 0 && i == (leap + 1) && lunarObj.isLeap == false) {
              --i;
              lunarObj.isLeap = true;
              temp = this.leapDays(lunarObj.year);
          }
          else {
              temp = this.monthDays(lunarObj.year, i)
          }
          if (lunarObj.isLeap == true && i == (leap + 1)) {
              lunarObj.isLeap = false;
          }
          offset -= temp;
          if (lunarObj.isLeap == false) {
              lunarObj.monCyl++;
          }
      }
     
      if (offset == 0 && leap > 0 && i == leap + 1) {
          if (lunarObj.isLeap) {
              lunarObj.isLeap = false;
          }
          else {
              lunarObj.isLeap = true;
              --i;
              --lunarObj.monCyl;
          }
      }
     
      if (offset < 0) {
          offset += temp;
          --i;
          --lunarObj.monCyl
      }
      lunarObj.month = i;
      lunarObj.day = offset + 1;
      return lunarObj;
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

//中文日期
  this.cDay = function(m, d){
      var nStr1 = ['日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      var nStr2 = ['初', '十', '廿', '卅', '　'];
      var s;
      if (m > 10) {
        s = '十' + nStr1[m - 10];
      }
      else {
          s = nStr1[m];
      }
      s += '月';
      switch (d) {
          case 10:
              s += '初十';
              break;
          case 20:
              s += '二十';
              break;
          case 30:
              s += '三十';
              break;
          default:
              s += nStr2[Math.floor(d / 10)];
              s += nStr1[d % 10];
      }
      return s;
  };
  this.solarDay2 = function(){
      var sDObj = new Date(this.SY, this.SM, this.SD);
      var lDObj = this.Lunar(sDObj);
      var tt = '农历' + this.cDay(lDObj.month,  Math.floor(lDObj.day * 100) / 100);
      
      lDObj = null;
      return tt;
  };
  this.weekday = function(){
      var day = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      return day[this.dateObj.getDay()];
  };
  this.YYMMDD = function(){
      var dateArr = [this.SY, '年', this.SM + 1, '月', this.SD, '日'];
      return dateArr.join('');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45