工作中常用hooks方法

//自定义指令：实现element-ui对话框dialog拖拽功能
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');
    dialogHeaderEl.style.cursor = 'move';

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

    dialogHeaderEl.onmousedown = e => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
      } else {
        styL = +sty.left.replace(/\px/g, '');
        styT = +sty.top.replace(/\px/g, '');
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;

        //将此时的位置传出去
        //binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

//动态修改网站ico
SET_APP_CONFIG(state) {
      var link = document.querySelector("link[rel*='icon']") ||         
      document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = state.ico;
      document.getElementsByTagName('head')[0].appendChild(link);
    }    

import Vue from 'vue';
import Clipboard from 'clipboard';
import $message from '@/libs/util.message'; //element-ui
// v-copy: 实现clipboard 复制功能
Vue.directive('copy', {
  bind(el, binding, vnode, oldVnode) {
    const clipboard = new Clipboard(el, {
      text: function() {
        return binding.value;
      },
    });
    clipboard.on('success', function(e) {
      $message.success('复制成功');
      e.clearSelection();
    });
    clipboard.on('error', function(e) {
      if (~e.text) {
        $message.error('复制失败');
      }
    });
  },
});

import Vue from 'vue'
/**
 * 根据value值获取label值
 *
 * @param {*} value
 * @param {*} list
 * @param {string} [keyMap={
 *     key: 'label',
 *     value: 'value'
 *   }]
 * @return {*}  {string}
 */
function ftValuelabel (
  value,
  list,
  keyMap = {
    key: 'label',
    value: 'value'
  }
) {
  return list.find(item => item[keyMap.value] === value)?.[keyMap.key]
}

Vue.filter('ftValuelabel', ftValuelabel)

export { ftValuelabel }

import Vue from 'vue';
import { citys } from '@/const/citys'; //城市数据

// 生成城市code和城市名称的映射
const cityMap = citys.reduce((pre, cur) => {
  cur.children.forEach(element => {
    pre[element.value.toString()] = element.label;
  });
  return pre;
}, {});

/**
 *  根据城市code获取城市名称
 *
 * @param {*} value 城市code
 * @return {*}  城市名称
 */
function ftGetCityByCode(value) {
  const city = cityMap[value];
  let province = '';
  citys.forEach((item, index) => {
    item.children.forEach((itt, idx) => {
      if (itt.label == city) {
        province = item.label;
      }
    });
  });
  return province + cityMap[value];
}
Vue.filter('ftGetCityByCode', ftGetCityByCode);

export { ftGetCityByCode };

import Vue from 'vue'

/**
 *html文本字符串中的img标签的宽度自适应
 *
 * @param {*} content htnl文本字符串
 * @return {*} htnl文本字符串
 */
function fitHtmlImgWidth (content) {
  const regex = new RegExp('<img', 'gi')
  return content?.replace(regex, '<img style="max-width: 100%; height: auto"')
}

Vue.filter('fitHtmlImgWidth', fitHtmlImgWidth)

export {
  fitHtmlImgWidth
}

/** 日期格式化 */
import dayjs from 'dayjs';
import Vue from 'vue';

/** 年月日时分秒 */
Vue.filter('formatDateTime', timeStr => {
  return formatDateTime(timeStr);
});
/** 年月日 */
Vue.filter('formatDate', timeStr => {
  return formatDate(timeStr);
});
/** 时分秒 */
Vue.filter('formatTime', timeStr => {
  return formatTime(timeStr);
});

/** 日期时间格式 */
export const EDTFormat = {
  /** 日期 */
  DATE: 'YYYY-MM-DD',
  /** 时间 */
  TIME: 'HH:mm:ss',
  /** 时间 */
  TIME_HM: 'HH:mm',
  /** 日期时间 */
  DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
  /** 日期时间 - 没有秒 */
  DATE_TIME_HM: 'YYYY-MM-DD HH:mm',
};

function format(dateTime, formatStr = EDTFormat.DATE_TIME) {
  if (!dateTime) {
    return '';
  }
  return dayjs(dateTime).format(formatStr);
}

/** 年月日 */
export function formatDate(dateTime) {
  return format(dateTime, EDTFormat.DATE);
}

/** 时分秒 */
export function formatTime(dateTime) {
  return format(dateTime, EDTFormat.TIME);
}

/** 年月日时分秒 */
export function formatDateTime(dateTime) {
  return format(dateTime, EDTFormat.DATE_TIME);
}

/** 年月日时分 */
export function formatDateTimeHM(dateTime) {
  return format(dateTime, EDTFormat.DATE_TIME_HM);
}

/** 日期转时间戳 */
export const date2Time = (date, YLdateFormat = EDTFormat.DATE) => {
  return date ? dayjs(date, YLdateFormat).valueOf() : null;
};

//校验
const rules = {
  //校验数值
  isNumber(num = 0, required = true) {
    // 0 正整数
    let reg = [/^[0-9]*$/, /^[0-9]*[.][0-9]*$/, /^\d+(\.\d{1,2})?$/, /^\d+(\.\d{1,3})?$/];
    return [
      { required: required, message: '请输入数值', trigger: 'blur' },
      { pattern: reg[num], message: '请输入正确的数值', trigger: 'blur' },
    ];
  },
  //校验手机号
  isPhone(required = true) {
    return [
      { required: required, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
    ];
  },
  //校验富文本是否为空
  isRichText(required = true) {
    //判断富文本正则，有文字，有img标签属于不为空。
    // 判断富文本编辑器输入是否为空或回车
    let getText = str => {
      return str
        .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
        .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
        .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
        .replace(/<[^<br/>]+>/g, ''); // 将所有 换行符 replace ''
    };
    let isNull = str => {
      if (str == '') return true;
      var regu = '^[ ]+$';
      var re = new RegExp(regu);
      return re.test(str);
    };
    let checkContent = (rule, value, callback) => {
      let text = getText(value);
      if (isNull(text)) {
        callback(new Error('请输入内容'));
      } else {
        callback();
      }
    };
    return [
      { required: required, message: '请输入内容', trigger: 'blur' },
      { validator: checkContent, trigger: 'blur' },
    ];
  },
  //校验编号需要是指定位数的字符串
  isCode(required = true, num = 0) {
    return [
      { required: required, message: '请输入编号', trigger: 'blur' },
      {
        pattern: new RegExp(`^[a-zA-Z0-9]{${num}}$`),
        message: '请输入正确的编号',
        trigger: 'blur',
      },
    ];
  },
};

export default rules;

import md5 from 'md5';
const util = {};

/**
 * @description 更新标题
 * @param {String} title 标题
 */
util.title = function(titleText, processTitle) {
  window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`;
};

/**
 * @description 打开新页面
 * @param {String} url 地址
 */
util.open = function(url) {
  var a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('target', '_blank');
  a.setAttribute('id', 'd2admin-link-temp');
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(document.getElementById('d2admin-link-temp'));
};
/**
 * @param {Number} times 回调函数需要执行的次数
 * @param {Function} callback 回调函数
 */
util.doCustomTimes = function(times, callback) {
  let i = -1;
  while (++i < times) {
    callback(i);
  }
};
/**
 * @param {Number} times 延迟执行
 * @param {Function} resolve 回调函数
 */
util.sleep = function(num) {
  return new Promise(resolve => {
    setTimeout(() => resolve(), num * 1000);
  });
};
/**
 * @description 随机字符串
 * @param {Number} num 执行次数
 * @param {Function} resolve 回调函数
 */
util.randStr = function(num = 10) {
  let str = '';
  const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  util.doCustomTimes(num, () => (str += _.sample(charSet).replace(/,/g, '')));
  return str;
};
/**
 * @description MD5加盐加密
 * @param {String} str 字符串
 */
util.saltMd5 = function(str) {
  return md5(str + process.env.VUE_APP_MD5_SALT);
};

export default util;

/**
   * 数组中是否包含某个值
   * @param {*} key
   * @param {*} keys
   * @return {*}
   */
  had(key, keys) {
    if (!key && key !== 0) return false;
    if (!keys) return false;
    if (!Array.isArray(keys)) return false;
    if (!isNaN(key)) return keys.includes(Number(key));
    return keys.includes(key);
  }

import { Loading } from 'element-ui';

/**
 *分页循环导出数据
 * @param {*} api 接口
 * @param {*} params 附带参数
 * @return {*} 数组
 */
const exportExcelData = async (api, params) => {
  const loading = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  return new Promise(async (resolve, reject) => {
    let page = 1;
    let data = [];
    let fn = async params => {
      let { records, current, pages } = await api({ ...params, pageNo: page, pageSize: 1000 });
      data = data.concat(records);
      if (current < pages) {
        page++;
        fn(params);
      } else {
        resolve(data);
        loading.close();
      }
    };
    fn(params);
  });
};
export { exportExcelData };

//自定义指令：实现clipboard 复制功能