vue项目实战：directives filters mixins util 内容的封装

/*
 * @Description: 页面按钮权限  directives/permission.js
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-12 14:17:46
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:16:23
 */
import Vue from 'vue';
import store from '@/store';

// 指令 有角色时候
// Vue.directive('permission', {
//   // inserted函数：当被绑定的元素插入到 DOM 中时……
//   inserted(el, binding, vnode) {
//     const { value } = binding // 获取指令绑定的值;
//     const roles = store.getters && store.getters.roles //用户本身的roles信息,arr;

//     if (value && value instanceof Array && value.length > 0) {
//       const permissionRoles = value

//       const hasPermission = roles.some(role => { // 只要有一个满足即返回true
//         return permissionRoles.includes(role)
//       })
//       // 没有该指令,直接删除掉该指令元素;即页面不显示没有指令权限的按钮;
//       if (!hasPermission) {
//         el.parentNode && el.parentNode.removeChild(el)
//         // 因项目需要，本指令remove其父元素;一般情况下，只隐藏其本身;
//       }
//     } else {
//       throw new Error(`need roles! Like v-permission="['admin','editor']"`)
//     }
//   }
// });

// 只有code码对应时候  使用时候  v-permission="['100000801']"
Vue.directive('permission', {
  // inserted函数：当被绑定的元素插入到 DOM 中时……
  inserted(el, binding, vnode) {
    // console.log(el, binding, vnode)
    const { value } = binding // 获取指令绑定的值;
    const btncodeList = store.getters && store.getters.getBtnCodeList.map(e => {return e.buttonCode}); // 权限code码 后端数据返回的数据
    // console.log(value, 'value', btncodeList,'btncodeList--指令')
    if (value && value instanceof Array && value.length > 0) {
      const permissionCode = value;
      
      const hasPermission = btncodeList.some(btncode => { // 只要有一个满足即返回true
        return permissionCode.includes(btncode)
      })

      // 没有该指令,直接删除掉该指令元素;即页面不显示没有指令权限的按钮;
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
        // 因项目需要，本指令remove其父元素;一般情况下，只隐藏其本身;
      }
    } else {
      throw new Error(`need roles! Like v-permission="['100000801','100000802']"`)
    }
  }
});

/*
 * @Description: 常用过滤器方法  可用于数据处理 枚举等操作  filters/index.js 管道符隔开即可 传参即为 | xx（参数一，参数二）
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-14 15:36:23
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:17:55
 */
// 官方指南 https://cn.vuejs.org/v2/api/#Vue-filter
// 注册
// Vue.filter('my-filter', function (value) {
//   // 返回处理后的值
// })

// 过滤器解析原理:在vue内部专门有这么一个函数用来解析过滤器语法：parseFilters 它的原理就是解析过滤器列表，然后循环过滤器列表并拼接字符串

// // getter，返回已注册的过滤器
// var myFilter = Vue.filter('my-filter')

// input去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格
export function trim(value, trim) {
  switch (trim) {
    case 1:
      return value.replace(/\s+/g, "");
    case 2:
      return value.replace(/(^\s*)|(\s*$)/g, "");
    case 3:
      return value.replace(/(^\s*)/g, "");
    case 4:
      return value.replace(/(\s*$)/g, "");
    default:
      return value;
  }
}

//字母大小写切换
/*type
 1:首字母大写
 2：首字母小写
 3：大小写转换
 4：全部大写
 5：全部小写
 * */
export function changeCase(str, type) {
  function ToggleCase(str) {
    var itemText = ""
    str.split("").forEach(
      function (item) {
        if (/^([a-z]+)/.test(item)) {
          itemText += item.toUpperCase();
        } else if (/^([A-Z]+)/.test(item)) {
          itemText += item.toLowerCase();
        } else {
          itemText += item;
        }
      });
    return itemText;
  }
  switch (type) {
    case 1:
      return str.replace(/\b\w+\b/g, function (word) {
        return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
      });
    case 2:
      return str.replace(/\b\w+\b/g, function (word) {
        return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
      });
    case 3:
      return ToggleCase(str);
    case 4:
      return str.toUpperCase();
    case 5:
      return str.toLowerCase();
    default:
      return str;
  }
}

//现金额大写转换函数
//ecDo.upDigit(1682)
//result："人民币壹仟陆佰捌拾贰元整"
//ecDo.upDigit(-1693)
//result："欠人民币壹仟陆佰玖拾叁元整"
export function capitalAmountChange(n) {
  var fraction = ['角', '分', '厘'];
  var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  var unit = [
    ['元', '万', '亿'],
    ['', '拾', '佰', '仟']
  ];
  var head = n < 0 ? '欠人民币' : '人民币';
  n = Math.abs(n);
  var s = '';
  for (var i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
  }
  s = s || '整';
  n = Math.floor(n);
  for (var i = 0; i < unit[0].length && n > 0; i++) {
    var p = '';
    for (var j = 0; j < unit[1].length && n > 0; j++) {
      p = digit[n % 10] + unit[1][j] + p;
      n = Math.floor(n / 10);
    }
    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    //s = p + unit[0][i] + s;
  }
  return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
}

//保留2位小数 四舍五入方法
export function toFiexed2(x) {
  var f = parseFloat(x);
  if (isNaN(f)) {
    return false;
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  if (rs < 0) {
    rs = s.length;
    s += '.';
  }
  while (s.length <= rs + 2) {
    s += '0';
  }
  return s;
}

// 千分符
export function thousandMarkFis(num) {
  if (isNaN(num) || !num || Number(num) < 1000) {
    return num
  }
  return num.toString().replace(/\d+/, function (s) {
    return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
  })
}

/*
 * @Description: vue混入 复用的公共js  mixins/common.js可单独引入 可以当插件（main.js）注册
 * @Version: 2.0 
 * @Autor: lhl
 * @Date: 2020-08-18 16:12:18
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:16:08
 */
export const Mixins = {
  data() {
    return {}
  },
  mounted() {
    console.log('Mixinsl里面的钩子前')
  },
  methods: {
    // 上移
    moveUp(index, list) {
      let that = this;
      if (index == 0) {
        that.$message({
          message: "到顶了，不能继续上移",
          type: "warning"
        });
      } else {
        let upDate = list[index - 1];
        list.splice(index - 1, 1);
        list.splice(index, 0, upDate);
      }
    },
    // 下移
    moveDown(index, list) {
      let that = this;
      if (index + 1 === list.length) {
        that.$message({
          message: "到底了，不能继续下移",
          type: "warning"
        });
      } else {
        let downDate = list[index + 1];
        list.splice(index + 1, 1);
        list.splice(index, 0, downDate);
      }
    },
  }
}

/*
 * @Description: 空vue实例 vue组件通讯方式的一种  util/eventBus.js
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-07-10 14:35:29
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:18:18
 */ 
import Vue from 'vue';

export default new Vue()

// 使用 import eventBus from '@/util/eventBus'

// 方法二在main.js 使用 Vue.prototype.$EventBus = new Vue() ====> 组件this.$EventBus.$emit/this.$EventBus.$on即可

/* 
 * @Description: 项目工具类方法  util/public.js  也可以结合lodash库有很多方便快捷的工具类方法  https://www.lodashjs.com/  main.js 导入公用方法 或者组件单独导入 import {xx} from '@/util/public'
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-08-19 10:03:17
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:18:46
 */

// 如需项目使用到cookie 安装 npm/cnpm i js-cookie -S 看项目情况是否需要
// import Cookie from 'js-cookie';

// export function getToken() {
//   return Cookie.get('token');
// }

// export function setToken(token) {
//   Cookie.set('token', token);
// }

// export function removeToken() {
//   Cookie.remove('token');
// }

// 防抖
export function debounce(fn, delay) {
  var delay = delay || 200;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}
// 节流
export function throttle(fn, interval) {
  var last;
  var timer;
  var interval = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(th, args);
      }, interval);
    } else {
      last = now;
      fn.apply(th, args);
    }
  }
}

//校验手机号码
export function isSpecialPhone(num) {
  return /^1[2,3,4,5,7,8]\d{9}$/.test(num)
}

// 拼接参数 比如给 https://www.baidu.com/aa=1&bb=2&cc=3
export function param(data) {
  let url = ''
  for (let k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + value
  }
  return url ? url.substring(1) : ''
}

//遍历参数？后面的
export function formatParam(obj) {
  let str = ''
  for (let i in obj) {
    str += `${i}=${obj[i]}&`
  }
  return str.slice(0, -1)
  // console.log(str)  比如{a:111,b:222,c:333}变为a=111&b=222&c=333
}

//获取地址栏url参数方式一 hash 返回"#"之后的内容   第一个"#"之后的内容
export function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.hash.split("?")[1].match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

//获取地址栏url参数方式一 区别 search "?"后的部分，又称为查询字符串   第一个"?"之后 (经测试应该是：第一个"?"之后 ， #之前)
export function getQueryString2(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

//url参数处理(获取参数)方式二(个人喜好这种)
export var URL = {
  set(key, value, url) {
    var reg = new RegExp('(' + key + ')=([^&]*)', 'ig');
    var url = url ? url : location.href;
    var result = reg.exec(url);
    if (result) {
      return url.replace(result[0], key + '=' + value);
    } else {
      var reg = /\?(.*)#?(.*)/gi;
      var search = reg.exec(url);
      if (search !== null) {
        return url.replace(search[1], search[1] + '&' + key + '=' + value);;
      } else {
        return '';
      }
    }
  },
  get(key, url) {
    var reg = new RegExp('(' + key + ')=([^&]*)', 'ig');
    var url = url ? url : location.href;
    var result = reg.exec(url);
    if (result) {
      return result[2];
    } else {
      return '';
    }
  }
}

// 判断浏览器类型
export function browserType() {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  // 判断是否Opera浏览器
  if (userAgent.indexOf("Opera") > -1) {
    return "Opera"
  };
  // 判断是否Firefox浏览器
  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  }
  // 判断是否Chrome浏览器
  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  }
  //判断是否Safari浏览器
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  }
  //判断是否IE浏览器
  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    return "IE";
  };
  // IE11  
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
  if (isIE11) {
    return "IE11";
  }
}

/* 判断当前浏览是否为IE */
export function isIEBrowser() {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isIE = (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1) || (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1); //判断是否IE浏览器
  var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
  if (isIE) {
    return "IE";
  }
  if (isEdge) {
    return "Edge";
  }
  return ""
}

// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
  var arr = urlData.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
    type: mime
  })
}

// 压缩图片
export function compressImage(path, config) {
  return new Promise((resolve, reject) => {
    var img = new Image()
    img.src = path
    img.onload = function () {
      var that = this
      var w = that.width
      var h = that.height
      var scale = w / h
      w = config.width || config.height * scale
      h = config.height || config.width / scale
      var quality = 0.7 // 默认图片质量为0.7
      // 生成canvas
      var canvas = document.createElement('canvas')
      var ctx = canvas.getContext('2d')
      // 创建属性节点
      var anw = document.createAttribute('width')
      anw.nodeValue = w
      var anh = document.createAttribute('height')
      anh.nodeValue = h
      canvas.setAttributeNode(anw)
      canvas.setAttributeNode(anh)
      ctx.drawImage(that, 0, 0, w, h)
      if (config.quality && config.quality <= 1 && config.quality > 0) {
        quality = config.quality
      }
      var base64 = canvas.toDataURL('image/*', quality)
      // var blob = convertBase64UrlToBlob(base64)
      // 回调函数返回base64的值，也可根据自己的需求返回blob的值
      resolve(base64)
    }
  })
}

/**
 * 将秒数转为时间格式
 * @format
 * @param data {number} 时间戳
 * @param format {string} 时间格式[完整格式：yyyy-MM-dd HH:mm:ss，默认yyyy-MM-dd]
 * @param text {string} 缺省文字
 */

export function timeFormat(data, format, text) {
  if (data === null || data === '' || data === undefined) {
    return text || '';
  }
  format = format || 'yyyy-MM-dd';
  let week = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六'
  ];
  let date = new Date(data);
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours() % 12,
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    'S+': date.getMilliseconds(),
    'W+': week[date.getDay()]
  };
  if (/(y+)/.test(format))
    format = format.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    );
  for (let k in o)
    if (new RegExp('(' + k + ')').test(format))
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
  return format;
}

/**
 * 将字符串时间转换为时间戳
 * @param {string} date
 */

export function getDateTime(date) {
  let timestamp = '';
  if (date) {
    date = date.substring(0, 19);
    date = date.replace(/-/g, '/'); // 必须把日期'-'转为'/'
    timestamp = new Date(date).getTime();
  }
  return timestamp;
}

/**
 * @function deepCopy 浅/深拷贝
 * @param  {type} obj {description}
 * @return {type} {description}
 */

export function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}

//  验证中国大陆身份证号码 
export function isIDCard(str) {
  var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
  return reg.test(str);
}

/* 
 *验证邮箱格式是否正确 
 *参数 email，需要验证的邮箱 
 */
export function chkEmail(email) {
  var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  return reg.test(email);
}

/**
 * 指定字符串 溢出显示省略号
 * @param {String} str
 * @param {Number} num
 */
export function getSubStringSum(str = "", num = 1) {
  let newStr;
  if (str) {
    str = str + '';
    if (str.trim().length > num) {
      newStr = str.trim().substring(0, num) + "...";
    } else {
      newStr = str.trim();
    }
  } else {
    newStr = ''
  }
  return newStr;
}

// 去除html标签
export function htmlSafeStr(str){
  return str.replace(/<[^>]+>/g, "")
}