common-utils-kit 1.0.5 → 1.0.7

package/README.md

@@ -13,5 +13,6 @@ import {test,format,tool} from "common-utils-kit/src/test";
 test //验证数据类型 例：test.number(1)
 format  // 格式化数据 例：
 tool //工具函数
+files  //文件下载
 ```
 

package/index.js

@@ -2,10 +2,14 @@
 import * as test from './src/test.js';
 import * as format from './src/format.js';
 import * as tool from './src/tool.js';
-console.log(' ', tool.antiShake())
+import * as files from './src/files.js';
+import directive from './src/directive.js';
+console.log(' ', test.hasValue(0))
 export default {
   test: { test },
   format: { format },
-  tool: { tool }
+  tool: { tool },
+  files: { files },
+  directive:directive
 }
 // https://www.cnblogs.com/oldCode/p/learnjts.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "common-utils-kit",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/directives.js

@@ -0,0 +1,225 @@
+// import ElTableInfiniteScroll from "el-table-infinite-scroll";
+// 自定义指令基础配置
+const directives = {
+  inputDebounce: { // 输入框防抖
+    inserted: function (el, binding) {
+      const fn = binding.value;
+      const time = binding.arg || 500;
+      let timer;
+      let flag = true; // 输入法标记
+      el.addEventListener("compositionstart", () => { // 监听中文输入开始
+        flag = false;
+      });
+      el.addEventListener("compositionend", () => { // 监听中文输入结束
+        flag = true;
+      });
+      el.addEventListener('input', () => {
+        timer && clearTimeout(timer);
+        timer = setTimeout(() => {
+          if (flag) fn();
+        }, time);
+      });
+    },
+  },
+  btnDebounce: { // 按钮防抖
+    inserted: (el, binding) => {
+      const time = binding.arg || 1000; // 防抖时间
+      let debounce = null;
+      el.addEventListener('click', event => {
+        if (debounce !== null) {
+          clearTimeout(debounce)
+          event && event.stopImmediatePropagation();
+        }
+        debounce = setTimeout(() => {
+          debounce = null
+        }, time)
+      }, true);
+    }
+  },
+  btnThrottle: { // 按钮节流
+    inserted: (el, binding) => {
+      const time = binding.arg || 1000; // 间隔时间
+      let cbFun;
+      el.addEventListener('click', event => {
+        if (!cbFun) { // 第一次执行
+          cbFun = setTimeout(() => {
+            cbFun = null;
+          }, time);
+        } else {
+          event && event.stopImmediatePropagation();
+        }
+      }, true);
+    }
+  },
+  relativeTime: { // 时间转换
+    bind(el, binding) {
+      var intervalTime = 60000
+      var Time = {
+        getUnix: function () { // 获取当前时间戳
+          var date = new Date();
+          return date.getTime();
+        },
+        getTodayUnix: function () { // 获取今天0点0分0秒的时间戳
+          var date = new Date();
+          date.setHours(0);
+          date.setMinutes(0);
+          date.setSeconds(0);
+          date.setMilliseconds(0);
+          return date.getTime();
+        },
+        getYearUnix: function () { // 获取今年1月1日0点0分0秒的时间戳
+          var date = new Date();
+          date.setMonth(0);
+          date.setDate(1);
+          date.setHours(0);
+          date.setMinutes(0);
+          date.setSeconds(0);
+          date.setMilliseconds(0);
+          return date.getTime();
+        },
+        getLastDate: function () { // 获取标准年月日
+          var date = new Date();
+          var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+          var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+          return date.getFullYear() + '-' + month + '-' + day;
+        },
+        getFormatTime: function (timestamp) { // 转换时间
+          var now = this.getUnix();// 当前时间戳
+          var today = this.getTodayUnix();// 今天0点时间戳
+          var timer = (now - timestamp) / 1000;// 转换为妙级别时间戳
+          var tip = '';
+          if (timer <= 0) {
+            tip = '刚刚';
+          } else if (Math.floor(timer / 60) <= 0) {
+            tip = '刚刚';
+          } else if (timer < 3600) {
+            tip = Math.floor(timer / 60) + '分钟前';
+          } else if (timer >= 3600 && (timestamp - today >= 0)) {
+            tip = Math.floor(timer / 3600) + '小时前';
+            intervalTime = 3600000;
+          } else if (timer / 86400 <= 31) {
+            tip = Math.ceil(timer / 86400) + '天前';
+            intervalTime = 3600000 * 24;
+          } else {
+            tip = this.getLastDate(timestamp);
+            intervalTime = 3600000 * 24;
+          }
+          return tip;
+        }
+      }
+      el.innerHTML = Time.getFormatTime(binding.value)
+      el.__timeout__ = setInterval(() => {
+        el.innerHTML = Time.getFormatTime(binding.value)
+      }, intervalTime)
+    },
+    unbind(el) {
+      clearInterval(el.innerHTML)
+      delete el.__timeout__
+    }
+  },
+  replace: {//限制input输入内容
+    inserted: function (el, binding, vnode) {
+      const element = el.tagName === "INPUT" ? el : el.querySelector("input");
+      let flag = true; // 输入法标记
+      element.addEventListener("compositionstart", () => {
+        flag = false;
+      }); // 监听中文输入开始
+      element.addEventListener("compositionend", () => {
+        flag = true;
+      }); // 监听中文输入结束
+      element.addEventListener("keyup", () => {
+        // 监听中文输入结束
+        if (flag) {
+          switch (binding.arg) {
+            case "price": // 正负的两位小数金额 -和.只能出现一次 并且-只能在首位
+              element.value = element.value.replace(/^([-+])?\D*(\d*(?:\.\d{0,2})?).*$/, "$1$2");
+              break;
+            case "+price": // 验证正的两位小数金额
+              element.value = element.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, "$1");
+              break;
+            case "num": // 只能输入正整数
+              element.value = element.value.replace(/[^\d]|^[0]/g, "");
+              break;
+            case "natural": // 只能输入自然数
+              element.value = element.value.replace(/[^\d]/g, "");
+              break;
+          }
+        }
+      });
+    },
+  },
+  elDragDialog: {
+    bind(el, binding, vnode) {
+      const dialogHeaderEl = el.querySelector('.el-dialog__header')
+      const dragDom = el.querySelector('.el-dialog')
+      dialogHeaderEl.style.cssText += ';cursor:move;'
+      dragDom.style.cssText += ';top:0px;'
+      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+      const getStyle = (function () {
+        if (window.document.currentStyle) {
+          return (dom, attr) => dom.currentStyle[attr]
+        } else {
+          return (dom, attr) => getComputedStyle(dom, false)[attr]
+        }
+      })()
+      dialogHeaderEl.onmousedown = (e) => {
+        // 鼠标按下，计算当前元素距离可视区的距离
+        const disX = e.clientX - dialogHeaderEl.offsetLeft
+        const disY = e.clientY - dialogHeaderEl.offsetTop
+        const dragDomWidth = dragDom.offsetWidth
+        const dragDomHeight = dragDom.offsetHeight
+        const screenWidth = document.body.clientWidth
+        const screenHeight = document.body.clientHeight
+        const minDragDomLeft = dragDom.offsetLeft
+        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+        const minDragDomTop = dragDom.offsetTop
+        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+        // 获取到的值带px 正则匹配替换
+        let styL = getStyle(dragDom, 'left')
+        let styT = getStyle(dragDom, 'top')
+        if (styL.includes('%')) {
+          styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+          styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+        } else {
+          styL = +styL.replace(/\px/g, '')
+          styT = +styT.replace(/\px/g, '')
+        }
+        document.onmousemove = function (e) {
+          // 通过事件委托，计算移动的距离
+          let left = e.clientX - disX
+          let top = e.clientY - disY
+          // 边界处理
+          if (-(left) > minDragDomLeft) {
+            left = -minDragDomLeft
+          } else if (left > maxDragDomLeft) {
+            left = maxDragDomLeft
+          }
+          if (-(top) > minDragDomTop) {
+            top = -minDragDomTop
+          } else if (top > maxDragDomTop) {
+            top = maxDragDomTop
+          }
+          // 移动当前元素
+          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+          // emit onDrag event
+          vnode.child.$emit('dragDialog')
+        }
+        document.onmouseup = function (e) {
+          document.onmousemove = null
+          document.onmouseup = null
+        }
+      }
+    }
+  },
+
+}
+// 批量注册自定义指令
+export default {
+  install(Vue) {
+    Object.keys(directives).forEach((key) => {
+      const name = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      Vue.directive(name, directives[key]);
+    });
+  },
+};
+

package/src/files.js

@@ -0,0 +1,109 @@
+/**
+ * 下载 base64 编码的文件
+ * @param {string} url - base64 编码的数据
+ * @param {string} type - 文件类型的后缀名
+ * @param {string} name - 文件名
+ * @returns {Promise<string>} - Promise 对象，包含文件下载成功时的消息或失败时的错误信息
+ * @example
+ * const base64Data = "data:image/png;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=";
+ * downloadBase64File(base64Data, "png", "myImage").then((message) => {
+ *   console.log(message); // 文件下载成功
+ * }).catch((error) => {
+ *   console.error(error); // 文件下载失败或其他错误信息
+ * });
+ */
+export function downloadBase64File(url, type = "pdf", name = "文件" + Date.now()) {
+  return new Promise((resolve, reject) => {
+    if (!url) return reject('文件不存在');
+    const imgType = ["png", "jpg", "gif", "jpeg", "webp", "bmp", "tif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF",];
+    const createBlob = (data, mimeType) => {
+      try {
+        return new Blob([data], { type: mimeType });
+      } catch (e) {
+        reject('创建 Blob 失败');
+      }
+    };
+    let myBlob = null;
+    if (imgType.includes(type)) {
+      const arr = url.split(",");
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bstr = atob(arr[1]);
+      const u8arr = new Uint8Array(bstr.length);
+      let n = bstr.length;
+      for (let i = 0; i < bstr.length; i++) {
+        u8arr[i] = bstr.charCodeAt(i);
+      }
+      myBlob = createBlob(u8arr, mime);
+    } else {
+      const bstr = atob(url);
+      const u8arr = new Uint8Array(bstr.length);
+      for (let i = 0; i < bstr.length; i++) {
+        u8arr[i] = bstr.charCodeAt(i);
+      }
+      myBlob = createBlob(u8arr, type);
+    }
+    const myUrl = URL.createObjectURL(myBlob);
+    const a = document.createElement("a");
+    a.setAttribute("href", myUrl);
+    const fileName = name;
+    a.setAttribute("download", fileName);
+    a.setAttribute("target", "_blank");
+    const clickEvent = document.createEvent("MouseEvents");
+    clickEvent.initEvent("click", true, true);
+    a.addEventListener("click", () => {
+      window.requestAnimationFrame(() => {
+        setTimeout(() => {
+          URL.revokeObjectURL(myUrl);
+          resolve('文件下载成功');
+        }, 0);
+      });
+    });
+    a.dispatchEvent(clickEvent);
+  });
+}
+/**
+ * 文件地址下载文件
+ * @param {string} url - 文件地址
+ * @param {string} filename - 下载后的文件名
+ * @returns {Promise<boolean>} - Promise 对象，表示下载成功（true）或失败（false）
+ * @example
+ * const fileUrl = "https://example.com/file/document.pdf";
+ * const customFileName = "myDocument";
+ * downloadFiles(fileUrl, customFileName).then((message) => {
+ *   console.log(message); // 文件下载成功
+ * }).catch((error) => {
+ *   console.error(error); // 文件下载失败或其他错误信息
+ * });
+ */
+export function downloadFiles(url, filename) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        const decodedUrl = decodeURIComponent(url);
+        const matches = decodedUrl.match(/\/([^\/?#]+)[^\/]*$/);
+        const newFileName = filename ? (filename.includes('.') ? filename : `${filename}.${matches[1].split('.').pop()}`) : matches[1]
+        if (window.navigator.msSaveOrOpenBlob) {
+          navigator.msSaveBlob(xhr.response, newFileName);
+        } else {
+          const link = document.createElement("a");
+          link.href = window.URL.createObjectURL(xhr.response);
+          link.download = newFileName;
+          link.style.position = "absolute";
+          link.style.opacity = "0";
+          link.style.pointerEvents = "none";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          window.URL.revokeObjectURL(link.href);
+        }
+        resolve("文件下载成功")
+      } else {
+        reject("文件下载失败")
+      }
+    };
+    xhr.send();
+  });
+}

package/src/format.js

@@ -1,9 +1,19 @@
 /**
-* 获取对象属性值，支持可选链操作符的形式
-* @param {Object} obj - 要获取属性值的对象
-* @param {string} key - 属性路径，可以包含点号（'.'）表示深层嵌套属性
-* @returns {*} - 返回属性值，如果属性不存在则返回 undefined
-*/
+ * 获取对象属性值，支持可选链操作符的形式
+ * @param {Object} obj - 要获取属性值的对象
+ * @param {string} key - 属性路径，可以包含点号（'.'）表示深层嵌套属性
+ * @returns {*} - 返回属性值，如果属性不存在则返回 undefined
+ * @example
+ * const data = {
+ *   parent: {
+ *     child: {
+ *       value: 'Hello, World!'
+ *     }
+ *   }
+ * };
+ * const nestedValue = getProperty(data, 'parent.child.value');
+ * console.log(nestedValue); // 输出: Hello, World!
+ */
 export function getProperty(obj, key) {
   if (!obj) { return }
   if (typeof key !== 'string' || key === '') {
@@ -27,6 +37,11 @@ export function getProperty(obj, key) {
  * @param {array} data 需要去重的原数组对象
  * @param {string} parameter 去重数组的唯一码(关键字)
  * @returns {Array} - 返回去重后的数组对象
+ * @example
+ * // 使用示例
+ * const data = [{ id: 1, name: 'John' },{ id: 2, name: 'Jane' },{ id: 1, name: 'John' },{ id: 3, name: 'Doe' }];
+ * const uniqueData = unrepeated(data, 'id');
+ * console.log(uniqueData); // 输出: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Doe' }]
  */
 export function unrepeated(data, parameter) {
   var temp = {};
@@ -46,6 +61,17 @@ export function unrepeated(data, parameter) {
  * @param {Array} previous - 树形结构数据
  * @param {string} bind - 树形结构中下级节点的绑定属性，默认为 'children'
  * @returns {Array} - 一维数组
+ * @example
+ * const treeData = [{ id: 1,
+ *     label: 'parent 1',
+ *     children: [{ id: 2, label: 'child 1' },{ id: 3, label: 'child 2' }]
+ *   },{id: 4,
+ *     label: 'parent 2',
+ *     children: [{ id: 5, label: 'child 3' },{ id: 6, label: 'child 4' }]
+ *   }];
+ * const flatArray = treeToFlat(treeData,'children');
+ * console.log(flatArray);
+ * // 输出：[ { id: 1, label: 'parent 1' },{ id: 2, label: 'child 1' }, { id: 3, label: 'child 2' }, { id: 4, label: 'parent 2' },{ id: 5, label: 'child 3' },{ id: 6, label: 'child 4' }]
  */
 export function treeToFlat(previous, bind = 'children') {
   const result = []
@@ -69,6 +95,31 @@ export function treeToFlat(previous, bind = 'children') {
  * @param {string} [rootValue=null] - 树形结构一级父 id，默认为 null
  * @param {string} [bind="pid"] - 父 id 的属性，默认为 "pid"
  * @returns {Array} - 树形结构
+ * @example
+ * const flatArray = [
+ *   { id: 1, label: 'Node 1', pid: null },
+ *   { id: 2, label: 'Node 2', pid: 1 },
+ *   { id: 3, label: 'Node 3', pid: 1 },
+ *   { id: 4, label: 'Node 4', pid: 2 },
+ *   { id: 5, label: 'Node 5', pid: 2 },
+ *   { id: 6, label: 'Node 6', pid: 3 },
+ *   { id: 7, label: 'Node 7', pid: null },
+ *   { id: 8, label: 'Node 8', pid: 3 },
+ * ];
+ * const treeData = flatToTree(flatArray);
+ * console.log(treeData);
+ * // 输出: [
+ * //   {
+ * //     id: 1,
+ * //     label: 'Node 1',
+ * //     pid: null,
+ * //     children: [
+ * //       { id: 2, label: 'Node 2', pid: 1, children: [ { id: 4, label: 'Node 4', pid: 2 }, { id: 5, label: 'Node 5', pid: 2 } ] },
+ * //       { id: 3, label: 'Node 3', pid: 1, children: [ { id: 6, label: 'Node 6', pid: 3, children: [ { id: 8, label: 'Node 8', pid: 6 } ] } ] },
+ * //     ],
+ * //   },
+ * //   { id: 7, label: 'Node 7', pid: null },
+ * // ]
  */
 export function flatToTree(flatArray, rootValue = null, bind = "pid") {
   const tree = [];
@@ -83,3 +134,72 @@ export function flatToTree(flatArray, rootValue = null, bind = "pid") {
   });
   return tree.length > 0 ? tree : null; // 处理不存在的根节点
 }
+
+/**
+ * 递归封装
+ * @param {Array} data - 待处理的数据
+ * @param {Function} funName - 处理每个节点的方法
+ * @param {string} [bind="children"] - 子节点绑定属性的名称，默认为 "children"
+ * @returns {Array} - 处理后的树形结构数据
+ * @example
+ * // 数据结构
+ * const treeData = [{ id: 1,
+ *     label: 'parent 1',
+ *     children: [{ id: 2, label: 'child 1' },{ id: 3, label: 'child 2' }]
+ *   },{id: 4,
+ *     label: 'parent 2',
+ *     children: [{ id: 5, label: 'child 3' },{ id: 6, label: 'child 4' }]
+ *   }];
+ *
+ * // 处理逻辑函数，
+ * function processFunction(node) {
+ *   return { label: node.label.toUpperCase() };
+ * }
+ * // 使用递归封装方法
+ * const processedTree = recursionFunction(treeData, processFunction);
+ */
+export function recursionFunction(data, processFunction, bind = 'children') {
+  function internalRecursion(previous, initial) {
+    return previous.map((element, i) => {
+      const menus = initial[i] ? processFunction(initial[i]) : {};
+      const children = element[bind] && Array.isArray(element[bind]) && element[bind].length > 0
+        ? internalRecursion(element[bind], initial[i][bind])
+        : [];
+      return { [bind]: children, ...menus };
+    });
+  }
+  return internalRecursion(data, data);
+}
+
+/**
+ *  解析给定函数中switch case语句中的数据并返回提取出值的数组对象。
+ * @param {function} filterMethod - 包含带有条件和标签的 case 的函数。
+ * @returns {Array} - 包含提取出的值和标签的对象数组。
+ * @example
+ * const filterMethod = (item) => {
+ *   switch (item) {
+ *     case 1://若是字符串请使用单引号
+ *       return "是";
+ *     case 2://若是字符串请使用单引号
+ *       return "否";
+ *     default:
+ *       return "数据异常";
+ *   }
+ * };
+ * 使用
+ * filterData(filterMethod)//[{label:"是"，value:1},{label:"否"，value:2}]
+ */
+export function filterData(filterMethod) {
+  const funStrArr = filterMethod.toString().split("case");
+  if (funStrArr.length < 1) return []
+  const list = [];
+  for (let i = 1; i < funStrArr.length; i++) {
+    const condition = funStrArr[i].split(":")[0].replace(/\s*/g, "").replace(/(\"*)/g, "");
+    const value = JSON.parse(condition.replace(/'/g, '"'))
+    const label = funStrArr[i].split("return")[1].split(";")[0].replace(/\s*/g, "").replace(/(\"*)/g, "");
+    if (value || value === 0 || value === false) {
+      list.push({ value, label });
+    }
+  }
+  return list;
+}

package/src/test.js

@@ -4,6 +4,15 @@
  * @param {*} value - 要验证的值
  * @param {string} type - 类型检查（可选），当类型为 'number' 时会将 0 视为有值
  * @returns {boolean} - 如果有值返回 true，否则返回 false
+ * @example
+ * // 使用示例
+ * console.log(hasValue('   Hello   ')); // 输出: true
+ * console.log(hasValue(0, 'number'),hasValue(0)); // 传入类型number，0也是有值 输出: true  false
+ * console.log(hasValue(true)); // 输出: true
+ * console.log(hasValue([1, 2, 3]),hasValue([])); // 输出: true  false
+ * console.log(hasValue({ key: 'value' }),hasValue({})); // 输出: true false
+ * console.log(hasValue(undefined)); // 输出: false
+ * console.log(hasValue(null)); // 输出: false
  */
 export function hasValue(value, type) {
   switch (typeof value) {
@@ -29,6 +38,15 @@ export function hasValue(value, type) {
  * 获取值的数据类型
  * @param {*} value - 要获取类型的值
  * @returns {string} - 返回值的数据类型，包括 'string'、'number'、'boolean'、'function'、'array'、'object'、'null' 等
+ * @example
+ * // 使用示例
+ * console.log(valueType('Hello')); // 输出: 'string'
+ * console.log(valueType(42)); // 输出: 'number'
+ * console.log(valueType(true)); // 输出: 'boolean'
+ * console.log(valueType(function () {})); // 输出: 'function'
+ * console.log(valueType([1, 2, 3])); // 输出: 'array'
+ * console.log(valueType({ key: 'value' })); // 输出: 'object'
+ * console.log(valueType(null)); // 输出: 'null'
  */
 export function valueType(value) {
   switch (typeof value) {

package/src/tool.js

@@ -38,3 +38,18 @@ export function throttle(time = 500) { //防抖  // 默认0.2秒后执行事件
     }, time)
   })
 }
+
+/**
+ * @description 进行阻塞延时，以达到可以简写代码的目的
+ * @param {number} value 堵塞时间 单位ms 毫秒
+ * @returns {Promise} 返回promise
+ * @example
+ * await sleep(1000);
+ */
+export function sleep(value = 100) {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve()
+		}, value)
+	})
+}