vue的一些常用公共方法(持续更新)

/*
 * @Description: 公共方法
 * @Author: qrn
 * @Date: 2022-06-22 14:47:53
 * @LastEditors: qrn
 * @LastEditTime: 2022-07-14 14:30:02
 */
import Vue from "vue";
import "./rulesUtils";
let areaData = JSON.parse(localStorage.getItem('regionList'))
/**
 * @description 白色按钮的失去焦点事件
 * @param {*} evt 
 * @example this.$btnBlur(evt)
 */
Vue.prototype.$btnBlur = function BlurFn(evt) {
  var target = evt.target;
  if (target.nodeName == "SPAN") {
    target = evt.target.parentNode;
  }
  target.blur();
};
/**
 * @description: 复制字符串
 * @param {要复制的字符串} url
 */
Vue.prototype.$CopyStr = function copyUrl(url) {
  const cInput = document.createElement("input");
  cInput.value = url;
  document.body.appendChild(cInput);
  cInput.select();
  document.execCommand("Copy");
  this.$message.success("复制成功");
  cInput.remove();
};


/**
 * @description: 根据省市区的code 筛选组合出省市区Object返回
 * @param {传入要筛选的省市区数组,type:Array} arr:[11,1101,110102]
 * @return {Object||undefined}
 * @example let obj = this.$HandlerArea([province_code, city_code, area_code])
 */
Vue.prototype.$HandlerArea = (arr) => {
  let [provinceCode, cityCode, areaCode] = arr;
  let areaObj = {};
  areaObj.province = Vue.prototype.$filterArr(areaData, provinceCode, 'value')
  areaObj.city = Vue.prototype.$filterArr(areaObj.province.children, cityCode, 'value');
  areaObj.area = Vue.prototype.$filterArr(areaObj.city.children, areaCode, 'value');
  return areaObj;
}

/**
 * @description: 在一个数组中筛选出符合条件的数据
 * @param {传入要过滤的数组,type:Array} arr
 * @param {要对比的参数名称,type:number||string||Boolean} typeData
 * @param {数组对象中要对比的参数名称,type:number||string||Boolean} target
 * @return {Object||undefined}
 */
Vue.prototype.$filterArr = (arr, typeData, target) => {
  if (typeof arr != "object") return;
  return arr.filter((r) => {
    return r[target] == typeData;
  })[0];
};


/**
 * @description 限制input输入框只能输入两位小数
 * @param {*} value 
 * @returns 
 * @example @input="value = $clearNoNum(value)" 
 */
Vue.prototype.$clearNoNum = (value) => {
  value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  value = value.replace(/^\./g, ""); //验证第一个字符是数字而不是字符          
  value = value.replace(/\.{2,}/g, "."); //只保留第一个.清除多余的       
  value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
  return value
}


/**
 * @description 过滤false, 空字符串不能过滤，因为一些数组会作以逗号分隔的字符串
 * @param {*} obj
 * @returns 
 * @example 
 */
 Vue.prototype.$filterFalse = (obj) => {
  let arr = [undefined, false, 0 ,'0', '0.00', null] // NaN
  for(let key in obj) {
      obj[key] = arr.includes(obj[key]) ? '' : obj[key]
  }
  return obj
}


/**
 * @description 枚举对象转数组对象
 * @param {*} obj
 * @return {Array}
 * @example 
 */
Vue.prototype.$objToArr = function(obj) {
  let arr = []
  for (let i in obj) {
   let item = { key: i , value: obj[i]}
   arr.push(item)
 }
 return arr
}

/**
 * @description  字符串转数组字符串
 * @param {*} str
 * @return {Array}
 * @example 
 */
Vue.prototype.$strToArr = (str) => {
  return str ? str.split(",") : []
}

/**
 * @description 数组字符串转字符串
 * @param {*} arr
 * @return {str}
 * @example 
 */
Vue.prototype.$arrToStr = (arr) => {
  return arr.length ? arr.join(',') : ''
}

表单提交自定义指令防抖函数

/*
 * @Description: 自定义指令
 * @Author: qrn
 * @Date: 2022-07-11 16:51:11
 * @LastEditors: qrn
 * @FilePath: \oddv5-admin\src\utils\directive.js
 */
import Vue from 'vue'
/**
 * @description 表单提交防抖
 * @param {*} 
 * @returns 
 * @example 防抖之前的正常写法@click='submit' -->改为防抖之后的 v-debounce = 'submit'即可
 */
Vue.directive('debounce', {
    inserted(el, binding) {
        let timer
        el.addEventListener('click', () => {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                binding.value();
            }, 500)
        })
    }
})


/**
 * @description 动态设置标题
 * @param {*} 
 * @returns 
 * @example <div v-title data-title="我是新的标题"></div>
 */
Vue.directive('title', {
    inserted: function (el, binding) {
        document.title = el.dataset.title
    }
})