封装工具函数合集

封装时间函数

Vue.prototype.$dateFormat = function (date, fmt = 'YYYY-MM-DD HH:mm:ss') {
  if (!date) {
    return ''
  }
  if (typeof date === 'string') {
    date = new Date(date.replace(/-/g, '/'))
  }
  if (typeof date === 'number') {
    date = new Date(date)
  }
  var o = {
    'M+': date.getMonth() + 1,
    'D+': date.getDate(),
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    'S': date.getMilliseconds()
  }
  var week = {
    '0': '\u65e5',
    '1': '\u4e00',
    '2': '\u4e8c',
    '3': '\u4e09',
    '4': '\u56db',
    '5': '\u4e94',
    '6': '\u516d'
  }
  if (/(Y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  if (/(E+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
  }
  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
}

封装ajax

import axios from 'axios'
// 跨域请求，允许保存cookieaxios.defaults.withCredentials = true
// HTTPrequest拦截,对发出的请求数据进行统一操作
axios.interceptors.request.use(config => {
  // 对请求参数做些什么
  return config
}, error => {
  // 对请求错误做些什么
  console.log('err' + error) // for debug
  return Promise.reject(error)
})
// HTTPresponse拦截，对收到的数据进行统一操作
axios.interceptors.response.use(data => {
  // 对返回数据进行操作
  return data
}, error => {
  return Promise.reject(new Error(error))
})
Vue.prototype.$ajax = function ajax (url = '', data = {}, type = 'GET') {
    type = type.toUpperCase()
  return new Promise(function (resolve, reject) {
    let promise
    if (type === 'GET') {
      let dataStr = '' // 数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 发送get请求
      promise = axios.get(url)
    } else {
    //  发送post
      promise = axios.post(url, data)
    }
    promise.then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

取随机数

Vue.prototype.$numberRandom = function (min, max) { return Math.floor(Math.random() * (max - min + 1) + min) }

## 自定义指令图片懒加载

import defaultImg from '@/assets/images/200.png'
export default {
  install (Vue) {
    // // 注册自定义指令   v2方法
    Vue.directive('lazy', {
      // inserted () {
      //   console.log(11111)
      // }
     //注册自定义指令  v3方法
      mounted (el, binding) {
        // 浏览器提供 IntersectionObserver
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting, '====IntersectionObserver')
            if (isIntersecting) {
              console.log(el, binding, 11111)
              // 图片加载失败就显示默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在监听dom
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        observer.observe(el)
      }
    })
  }
}

## 图片文件转base64格式(实现预览)

fileChange (e) {
      // console.log(e.target.files)
      if (e.target.files.length === 0) {
        // 没有选择图片
        this.avatar = ''
      } else {
        // 创建 fr 对象---FileReader构造函数
        const fr = new FileReader()
        // 读取文件
        fr.readAsDataURL(e.target.files[0])
        // 监听加载事件,读取成功后执行里面的回调
        fr.onload = () => {
        // 将结果赋给xxx
          this.avatar = fr.result
        }
      }
    },

修改input样式并上传头像

• 给input设置change改变事件
• 设置一个变量接收转换的数据
• 拿到事件目标,里面有个方法e.target.files是个伪数组.通过e.target.files.length判断用户是否选择了图片
• 通过new FileReader拿到一个实例
• 通过 实例名.readAsDataURL 将图片转成base64格式
• onload可以监听转换完成后/给声明变量赋值

## 枚举 键值对

     //手动写一个具有对应关系的对象
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber'
      }
     //第一个参数是自己写的对应关系对象,第二个参数是原数组
     function demandArr(userRelations,arr){
      //创建一个空数组
      const newArr = []
      arr.forEach(item => {
      //创建一个空对象
        const obj = {}
        //循环数组里的每一个对象
        for (const k in item) {
          const englishKey = userRelations[k] 
            obj[englishKey] = item[k]
          }
         newArr.push(obj)
       })
      }
      
      // console.log(newArr)

​

获取时间（一般时间选择器默认时间用到）

//获取当前时间,day为number,getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;
getDay(day) {
      let today = new Date(),
        targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      let tYear = today.getFullYear(),
        tMonth = today.getMonth(),
        tDate = today.getDate(),
        tHour = today.getHours(),
        tMinute = today.getMinutes(),
        tSeconds = today.getSeconds();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      tHour = this.doHandleMonth(tHour);
      tMinute = this.doHandleMonth(tMinute);
      tSeconds = this.doHandleMonth(tSeconds);
      return tYear + '-' + tMonth + '-' + tDate + ' ' + tHour + ':' + tMinute + ':' + tSeconds;

判断数据是否为json

//判断数据源是不是json数据
    isJsonString(str) {
      try {
        if (typeof JSON.parse(str) == 'object') {
          return true;
        }
      } catch (e) {
        console.log('e', e);
      }
      return false;
    },

判断object数据类型

//判断Object数据类型
export function isType(obj) {
    var type = Object.prototype.toString.call(obj);
    if (type == '[object Array]') {
        return 'Array';
    } else if (type == '[object Object]') {
        return "Object"
    } else {
        return 'param is no object type';
    }
}

将扁平的数据树形结构

// 将平铺的数据转化为树形结构的数据
export function tranListTotreeList(list) {
  const map = {}
  list.forEach(item => {
    item.children = []
    map[item.id] = item
// 把item.id作为属性名 吧item作为属性值
// id 2c: {id: '2c', pid: '', name: '财务部', children: Array(2)}
  })
  console.log(list)
  console.log(map)
  // 3. 遍历数据，生成最终的树形结构
  const treeList = []
  list.forEach(item => {
    // 1. 找关系，找出父级的对象，如果找到父级对象，将item，添加父级的对象的chilren里面
    // 2. 判断是否是子级数据对象
    const parent = map[item.pid]
    if (parent) {
      // 子级数据对象，二级数据加入到父级对象parent的chilren中
      parent.children.push(item)
    } else {
      // 3. 一级的数据对象，一级数据对象 直接加入到treeList中
      treeList.push(item)
    }
  })
  return treeList
}