common-utils-kit 1.0.6 → 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

@@ -3,11 +3,13 @@ import * as test from './src/test.js';
 import * as format from './src/format.js';
 import * as tool from './src/tool.js';
 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 },
-  files: { files }
+  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.6",
+  "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/format.js

@@ -1,19 +1,19 @@
 /**
-* 获取对象属性值，支持可选链操作符的形式
-* @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!
-*/
+ * 获取对象属性值，支持可选链操作符的形式
+ * @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 === '') {
@@ -61,7 +61,7 @@ export function unrepeated(data, parameter) {
  * @param {Array} previous - 树形结构数据
  * @param {string} bind - 树形结构中下级节点的绑定属性，默认为 'children'
  * @returns {Array} - 一维数组
-* @example
+ * @example
  * const treeData = [{ id: 1,
  *     label: 'parent 1',
  *     children: [{ id: 2, label: 'child 1' },{ id: 3, label: 'child 2' }]
@@ -134,6 +134,7 @@ export function flatToTree(flatArray, rootValue = null, bind = "pid") {
   });
   return tree.length > 0 ? tree : null; // 处理不存在的根节点
 }
+
 /**
  * 递归封装
  * @param {Array} data - 待处理的数据
@@ -169,3 +170,36 @@ export function recursionFunction(data, processFunction, bind = 'children') {
   }
   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/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)
+	})
+}