简介

一般常用组件

安装依赖

npm install hlx-packages
建议不要直接使用 cnpm 安装依赖。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

导入

import regCom from 'hlx-packages'

import App from './App.vue'

createApp(App).use(regCom)

components

1. hlx-dialog

   | 参数 | 说明 | 默认 | 类型 |

   |---|---|---|---|

   | visible | 是否显示 | false | boolean |

   | width| 标题 | 50% | string |

   | appendToBody | 是否添加到body | false | boolean |

   | theme | 主题颜色|''，深色-'deep' | string |

   | draggable | 是否能拖动 | false | boolean |

   | rightTopClose | 是否有右上角关闭按钮 | true | boolean |

   | hasFooter | 是否有底部按钮 | true | boolean |

   | hasConfirm | 是否有底部确认按钮 | true | boolean |

   | confirmText | 确认按钮文本 | '确定' | string |

   | hasClose | 是否有底部关闭按钮 | true | boolean |

 ```
  <hlx-dialog v-model:visible="visible" title="标题" width="1080px" :hasFooter="false">
    <div>test</div>
  </hlx-dialog>
 ```

2. hlx-count-to

 | 参数 | 说明 | 默认 | 类型 |

 |---|---|---|---|

 | name | id | --- | string |

 | num | 数字值 | ---| number |

 | color | 数字颜色 | ---| string |

 | numLen | 数字占位位数 | ---| number |

 | noneDivide | 是否有逗号 | ---| boolean |


```
 <hlx-count-to name="currentIn" :numm="12345" color="#2AB1FF" :numLen="8" :noneDivide="true" />
```

utils

  main.ts 
  
  const app = createApp(App)
  
  hlxPackages.installUtils(app)
  
  xxx.vue

  import {getCurrentInstance } from 'vue'
  
  const { proxy }:any = getCurrentInstance();
  
  proxy.xx()

1. 格式化数字

/**
* @param number 每三位数增加逗号
* @param decimal 保留小数位数（默认0）
* @returns {String}
*/
formatWithCommas(number,decimal)

2. 计算占比

 /**
  * @param completed 当前计算的数
  * @param total 总数
  * @returns {String}
  */
 getPercentage(completed,total)

3. 小数转换百分比

 /**
  * @param num 计算数
  * @returns {String} //'22.33%'
  */
 convertToPercentage(num)

4. 获取url上的参数

 /**
  * @param {string} url
  * @returns {Object}
  */
 getParamsByUrl(url)

4. 防抖

 /**
  * @param {Function} func
  * @param {number} wait
  * @param {boolean} immediate
  * @return {*}
  */
 debounce(func, wait, immediate)

5. 防抖,多次点击操作时 只触发最后一次的fn

 /**
  * @param {Function} func
  * @param {number} wait
  * @return {*}
  */
 lastOnce(func, wait)

6. 验证是否为有效车牌号

 /**
  * @param {string} vehPlate
  * @returns {Boolean}
  */
 isPlate(func, wait)

7. 验证是否为有效经纬度

 /**
  * @param {Array} lonLatArr //[lon,Lat]
  * @returns {Boolean}
  */
 isLngLat(lonLatArr)

8. 获取GUID

 /**
  * @returns {String}
  */
 getGuid()

9. 验证密码 至少8位、包含 数字、大小写字母、字符 4种正则表达式

 /**
   * @param {String} str 
   * @returns {Boolean}
  */
 passwordValid(str)

9. 比较两个时间的时间差(开始时间不能大于结束时间)

 /**
  * @param startTime 开始时间 
  * @param endTime 结束时间
  * compareDifferTime('2024-08-08 10:00:00', '2024-08-08 10:11:00')
  * @return {number} 时间差 单位-分钟
  */
 compareDifferTime(startTime, endTime)

10. 获取两个日期相隔月份数量

 /**
  * @param datePre
  * @param dateNext
  * @returns {number}
  */
  getDiffMonth(datePre, dateNext)

11. 计算两个日期 大小

 /**
  * @param startTime 开始时间 
  * @param endTime 结束时间
  * compareTime('2024-08-08 10:00:00', '2024-08-08 10:11:00')
  * @return {boolean} //true startTime-false； endTime-大
  */
  compareTime(startTime, endTime)

12. 获取时间

 /**
  * 时间戳 转换成指定格式日期（默认 年月日 时分秒）
  * @param timestamp 时间戳值 
  * @param formats 格式，默认'y-m-d h:i:s'
  *  formats格式包括:y-m-d | y-m-d h:i:s | y年m月d日 | y年m月d日 h时i分
  * getDate() =>timestamp 不传获取当前时间 
  * getDate('',formats) =>timestamp 不传,以当前时间formats的的格式返回 
  * dateFormat(11111111111111, 'Y年m月d日 H时i分')
  * @return string // "2322年02月06日 03时45分"
  */
  getDate(timestamp, formats)

浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

开源协议

ISC