npm package: @lovels/xtt
Description: <h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">XTT v1.0.2</h1>
Author: xtt
Latest version: 1.0.8

<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">XTT v1.0.2</h1>

[TOC]



### 简介

XTT-JS框架，公共方法、组件、样式集合。



### 使用

##### 安装

```
npm i @lovels/xtt
```

##### 引用

```javascript
// 全局注册
import XTT from "@lovels/xtt
import "@lovels/xtt/style.css"; // 引用公共样式
app.use(XTT, 'Vue3')


// 按需使用
import XTT from "@lovels/xtt
const { UnitConfig, ··· } = XTT;
```



### 方法

#### UnitConfig

##### 常用方法

###### 深拷贝

```javascript
//deepClone
const { UnitConfig } = XTT;
let oldData = {};
let newData = UnitConfig.deepClone(oldData);
```

###### 扁平树结构

```javascript
//flatTree
const { UnitConfig } = XTT;
let oldList = [];
let newList = [];
UnitConfig.flatTree(oldList, newList);
```

###### 生成UUID

```javascript
//getUUID
const { UnitConfig } = XTT;
UnitConfig.getUUID(`自定义前缀名称 || 空`);
```

###### 判断是否可以JSON.parse

```javascript
//isJSON
const { UnitConfig } = XTT;
UnitConfig.isJSON(`String`);
```

###### 防抖

```javascript
//debounce
//fun 需要执行的函数  function
//wait 等待时间   number 毫秒
//immediate 立即执行   boolean
const { UnitConfig } = XTT;
UnitConfig.debounce(fun, wait, immediate);
```

###### 判断是否为空（undefined，null，‘’ ）

```javascript
//isNil
//value 需要判断的内容
//return boolean
const { UnitConfig } = XTT;
UnitConfig.isNil(value);
```

###### 设置Tab

```javascript
 /**
 * 设置Tab
 * @param {String} name 
 * @param {Object} tab1 
 */
const { UnitConfig } = XTT;
UnitConfig.setTab(name, tab1);
```

###### 获取Tab

```javascript
 /**
 * 获取Tab
 * @param {String} name 
 * @param {String} tab 
 * @returns {(String | *)}
 */
const { UnitConfig } = XTT;
UnitConfig.getTab(name, tab);
```

###### 筛选tab当前active

```javascript
/**
 * 筛选tab当前active
 * @param {Array} list 
 * @param {String} key 
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 * @returns {String}
 */
const { UnitConfig } = XTT;
UnitConfig.tabActive(list, key, pageKey);
```

###### 存储筛选项

```javascript
/**
 * 存储筛选项
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 */
const { UnitConfig } = XTT;
UnitConfig.setScreen(name, keys, pageKey);
```

###### 获取筛选项

```javascript
/**
 * 获取筛选项
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 */
const { UnitConfig } = XTT;
UnitConfig.getScreen(name, pageKey);
```

###### 编译筛选数据

```javascript
/**
 * 编译筛选数据
 */
const { UnitConfig } = XTT;
UnitConfig.getFiltrateData(FiltrateList = []);
```

###### 参数处理

```javascript
/**
* 参数处理
* @param {*} params  参数
*/
const { UnitConfig } = XTT;
UnitConfig.tansParams(params);
```

###### 字符串格式化(%s )

```javascript
/**
* 字符串格式化(%s )
*/
const { UnitConfig } = XTT;
UnitConfig.sprintf(str);
```



##### 时间/日期

###### 判断ios|安卓

```javascript
/**
 * 判断ios|安卓
 * @returns {String} ios | android
 */
const { UnitConfig } = XTT;
UnitConfig.appSource();
```

###### new Date  ios -转为/

```javascript
/**
 * new Date  ios -转为/
 * @param {(String | Date)} data 
 * @returns {(String | Date)}
 */
const { UnitConfig } = XTT;
UnitConfig.isIosDate(data);
```

###### 日期时间格式化

```javascript
//Format
const { UnitConfig } = XTT;
UnitConfig.Format( new Date(), "yyyy-MM-dd hh:mm:ss" )
```

###### 获取时间

```javascript
/**
 * 获取时间
 * @param {(String | Date | *)} [date] 
 * @returns {Date}
 */
const { UnitConfig } = XTT;
UnitConfig.getDate(date);
```

###### 获取当前时间 格式：YYYY-MM-DD

```javascript
/**
 * 获取当前时间 格式：YYYY-MM-DD
 */
const { UnitConfig } = XTT;
UnitConfig.getTimt_YMD(data, type = "YYYY-MM-DD");
```

###### 获取两个日期间的所有日期

```javascript
/**
 * 获取两个日期间的所有日期
 */
const { UnitConfig } = XTT;
UnitConfig.getBetweenDate(start, end);
```

###### 获取下/上n个秒,分钟,小时,天,月,年

```javascript
/**
 * 获取下/上n个秒,分钟,小时,天,月,年
 */
const { UnitConfig } = XTT;
UnitConfig.getBeforeOrAfter(original, type, n, format);
```

###### 获取某月第一天和最后一天

```javascript
/**
 * 获取某月第一天和最后一天
 */
const { UnitConfig } = XTT;
UnitConfig.getMonthFirstAndLast(date = new Date());
```

###### 获取某天的周一和周日

```javascript
/**
 * 获取某天的周一和周日
 */
const { UnitConfig } = XTT;
UnitConfig.getWeekFirstAndLast(date = new Date());
```

###### 分钟数转 返回: 小时:分钟

```javascript
/**
 * 分钟数转 返回: 小时:分钟
 */
const { UnitConfig } = XTT;
UnitConfig.minuteToTime(min);
```

###### 获取两个时间差转化为天,小时,分钟,秒

```javascript
/**
 * 获取两个时间差转化为天,小时,分钟,秒
 */
const { UnitConfig } = XTT;
UnitConfig.getDateDiff(from, to, unit);
```

###### 日期格式化

```javascript
/**
* 日期格式化
*/
const { UnitConfig } = XTT;
UnitConfig.parseTime(time, pattern);
```

###### 添加日期范围

```javascript
/**
* 添加日期范围
*/
const { UnitConfig } = XTT;
UnitConfig.addDateRange(params, dateRange, propName);
```



##### 图片/文件转换

###### base64转换为blob

```javascript
/**
 * base64转换为blob
 * @param {String} urlData 
 * @returns {Blob}
 */
const { UnitConfig } = XTT;
UnitConfig.dataURLtoFile(urlData);
```

###### 验证是否为blob格式

```javascript
/**
 * 验证是否为blob格式
 */
const { UnitConfig } = XTT;
UnitConfig.blobValidate(data);
```

###### url转base64

```javascript
/**
 * url转base64
 */
const { UnitConfig } = XTT;
UnitConfig.urlToBase64(url);
```

###### blob转换为file

```javascript
/**
 * blob转换为file
 */
const { UnitConfig } = XTT;
UnitConfig.blobToFile(newBlob, fileName);
```

###### base64补全

```javascript
/**
 * base64补全
 */
const { UnitConfig } = XTT;
UnitConfig.vtBbace64(base);
```

###### 图片压缩

```javascript
/**
 * 图片压缩
 */
const { UnitConfig } = XTT;
UnitConfig.imageCompress(image);
```

###### 获取图片base64

```javascript
/**
 * 获取图片base64
 */
const { UnitConfig } = XTT;
UnitConfig.getBase64(img, callback);
```

###### 图片按比例缩放

```javascript
/**
 * 图片按比例缩放
 */
const { UnitConfig } = XTT;
UnitConfig.imageEqualScaling(img, tt = 700);
```

###### 修改图片背景色

```javascript
/**
 * 修改图片背景色
 */
const { UnitConfig } = XTT;
UnitConfig.setImageBack(image, color = "", name = "image");
```

###### 图形压缩

```javascript
/**
 * 图形压缩
 */
const { UnitConfig } = XTT;
UnitConfig.etOriginalFile(image, quality);
```



##### 链接

###### 判断url是否是http或https  

```javascript
//isHttp
const { UnitConfig } = XTT;
UnitConfig.isHttp(`http://localhost:8080`);
```

###### 判断path是否为外链

```javascript
//isExternal
const { UnitConfig } = XTT;
UnitConfig.isExternal(`http://localhost:8080`)
```

###### url判断有效

```javascript
/**
 * url是否有效
 * @param {string} url
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validURL(url);
```



##### 颜色

###### hex颜色转rgb颜色

```javascript
//hexToRgb
const { UnitConfig } = XTT;
UnitConfig.hexToRgb(`String`);
```

###### rgb颜色转Hex颜色

```javascript
//rgbToHex
const { UnitConfig } = XTT;
UnitConfig.rgbToHex(r, g, b);
```

###### 变浅颜色值

```javascript
//getLightColor
const { UnitConfig } = XTT;
UnitConfig.getLightColor(color, level);
```

###### 变深颜色值

```javascript
//getDarkColor
const { UnitConfig } = XTT;
UnitConfig.getDarkColor(color, level);
```

###### 随机颜色值

```javascript
//randomHexColor
const { UnitConfig } = XTT;
UnitConfig.randomHexColor();
```



##### 其他方法

###### 本地缓存localStorage

```javascript
/**
 * 本地缓存
 * local.set(key, value) 存储
 * local.get(key) 获取
 * local.setJSON(key, jsonValue) 存储JSON
 * local.getJSON(key) 获取JSON
 * local.remove(key) 删除
 */
const { UnitConfig } = XTT;
UnitConfig.local.set(key, value);
UnitConfig.local.get(key);
UnitConfig.local.setJSON(key, jsonValue);
UnitConfig.local.getJSON(key);
UnitConfig.local.remove(key);
```

###### 本地缓存sessionStorage

```javascript
/**
 * 会话级缓存
 * session.set(key, value) 存储
 * session.get(key) 获取
 * session.setJSON(key, jsonValue) 存储JSON
 * session.getJSON(key) 获取JSON
 * session.remove(key) 删除
 */
const { UnitConfig } = XTT;
UnitConfig.session.set(key, value);
UnitConfig.session.get(key);
UnitConfig.session.setJSON(key, jsonValue);
UnitConfig.session.getJSON(key);
UnitConfig.session.remove(key);
```



###### 关闭微信浏览器窗口

```javascript
/**
 * 关闭微信浏览器窗口
 * @param {*} next 
 */
const { UnitConfig } = XTT;
UnitConfig.WeixinJSBridgeClose(next);
```

###### 转换字符串，undefined,null等转化为""

```javascript
/**
* 转换字符串，undefined,null等转化为""
*/
const { UnitConfig } = XTT;
UnitConfig.parseStrEmpty(str);
```

###### 数据合并

```javascript
/**
* 数据合并
*/
const { UnitConfig } = XTT;
UnitConfig.mergeRecursive(source, target);
```

###### 构造树型结构数据

```javascript
/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
const { UnitConfig } = XTT;
UnitConfig.handleTree(data, id, parentId, children);
```

###### 返回项目路径

```javascript
/**
 * 返回项目路径
 */
const { UnitConfig } = XTT;
UnitConfig.getNormalPath(p);
```

###### 小写字母判断有效

```javascript
/**
 * 小写字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validLowerCase(str);
```

###### 大写字母判断有效

```javascript
/**
 * 大写字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validUpperCase(str);
```

###### 字母判断有效

```javascript
/**
 * 字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validAlphabets(str);
```

###### 邮箱判断有效

```javascript
/**
 * 邮箱判断有效
 * @param {string} email
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validEmail(email);
```

###### 字符串判断有效

```javascript
/**
 * 字符串判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.isString(str);
```

###### 是否为数组

```javascript
/**
 * 是否为数组
 * @param {Array} arg
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.isArray(arg);
```

###### 转驼峰

```javascript
/**
 * 转驼峰
 */
const { UnitConfig } = XTT;
UnitConfig.toHump(name);
```

###### 驼峰转下划线

```javascript
/**
 * 驼峰转下划线
 */
const { UnitConfig } = XTT;
UnitConfig.toLine(name);
```

###### 将表情转为字符

```javascript
/**
 * 将表情转为字符
 */
const { UnitConfig } = XTT;
UnitConfig.utf16toEntities(str);
```

###### 将字符转为表情

```javascript
/**
 * 将字符转为表情
 */
const { UnitConfig } = XTT;
UnitConfig.uncodeUtf16(str);
```

###### SHA1加密

```javascript
/**
 * SHA1加密
 */
const { UnitConfig } = XTT;
UnitConfig.encodeUTF8(s);
```

###### 退出钉钉应用

```javascript
/**
 * 退出钉钉应用
 */
const { UnitConfig } = XTT;
UnitConfig.closeDing(next = () => { });
```

###### 获取当前终端

```javascript
/**
 * 获取当前终端
 */
const { UnitConfig } = XTT;
UnitConfig.isPLUS(keys);
```

###### 是否为null

```javascript
/**
 * 是否为null
 */
const { UnitConfig } = XTT;
UnitConfig.isNull(value);
```

###### 对象数组针对某个字段去重

```javascript
/**
 * 对象数组针对某个字段去重
 */
const { UnitConfig } = XTT;
UnitConfig.uniqueArray(arr, field);
```

###### 字典转换

```javascript
/**
 * 字典转换
 */
const { UnitConfig } = XTT;
UnitConfig.translateDict(id, dictList);
```

###### 获取多个字典时匹配字典类型

```javascript
/**
 * 获取多个字典时匹配字典类型
 */
const { UnitConfig } = XTT;
UnitConfig.matchDictType(code, list);
```

###### 获取多个枚举时匹配枚举类型

```javascript
/**
 * 获取多个枚举时匹配枚举类型
 */
const { UnitConfig } = XTT;
UnitConfig.matchEnumType(code, list);
```

###### 数组根据某个属性分组

```javascript
/**
 * 数组根据某个属性分组
 */
const { UnitConfig } = XTT;
UnitConfig.groupArray(array, key);
```









#### BUS 事件总线

```javascript
const { Bus } = XTT;

// 挂载
Bus.$on(`自定义名称`, (res) => {
    console.log(`回调`)
});

// 触发
Bus.$emit(`自定义名称`, `传参 || 空`);

// 卸载
Bus.$off(`自定义名称`);// 卸载
Bus.$off([`自定义名称`, `自定义名称`]);// 批量卸载
Bus.$off();// 批量卸载

```

#### webSocket

```javascript
const { WebSocket } = XTT;
const Socket = WebSocket(`http://localhost:8080/websocket/message`);

Socket.on("open", (event) => {
	console.log("连接到服务器", event);
});
Socket.on("message", (mes) => {
	console.log("message", mes);
});
Socket.on("error", (error) => {
	console.log("error", error);
});
Socket.on("close", (event) => {
	console.log("close", event);
});
```

#### watermark 水印

```javascript
const { Watermark } = XTT;

// 单行
Watermark.set(`这是一个水印`); 
// 多行
Watermark.set(`这是第一行\n这是第二行`);

```



### 组件







### 样式

| 类型             | Class                                                        | 名称                    | 大小 | 示例                                                         |
| ---------------- | ------------------------------------------------------------ | ----------------------- | ---- | ------------------------------------------------------------ |
| color            | color-white                                                  | 白色                    |      |                                                              |
|                  | color-black                                                  | 黑色                    |      |                                                              |
|                  | color-success                                                | 成功颜色                |      |                                                              |
|                  | color-warning                                                | 警告颜色                |      |                                                              |
|                  | color-danger                                                 | 危险颜色                |      |                                                              |
|                  | color-info                                                   | 信息颜色                |      |                                                              |
|                  | color-blue                                                   | 蓝色                    |      |                                                              |
| background-color | background-white                                             | 白色                    |      |                                                              |
|                  | background-black                                             | 黑色                    |      |                                                              |
| font-size        | fS-1                                                         | 字体大小                | 0-40 | fS-0<br />fS-1<br />···<br />fS-40                           |
| border           | border-base-1<br />border-light-1<br />border-lighter-1<br />border-extra-light-1 | 边框颜色宽度            | 0-5  | border-base-1<br />borderT-base-1<br />borderB-base-1<br />borderTB-base-1<br />borderL-base-1<br />borderR-base-1<br />borderLR-base-1 |
| border-radius    | border-radius-1                                              | 边框圆角                | 0-10 | border-radius-0<br />border-radius-1<br />···<br />border-radius-10 |
| padding          | padding-1                                                    | padding                 | 0-40 | padding-1<br />paddingT-1<br />paddingB-1<br />paddingTB-1<br />paddingL-1<br />paddingR-1<br />paddingLR-1 |
| margin           | margin-1                                                     | margin                  | 0-40 | margin-1<br />marginT-1<br />marginB-1<br />marginTB-1<br />marginL-1<br />marginR-1<br />marginLR-1 |
| overFlow         | overFlow-1                                                   | 文字溢出                | 0-10 | overFlow-0<br />overFlow-1<br />···<br />overFlow-10         |
| flex             | flex-box                                                     | 盒模型                  |      |                                                              |
|                  | flex-item-center                                             | Y位于容器的中心         |      |                                                              |
|                  | flex-item-start                                              | Y位于容器的开头         |      |                                                              |
|                  | flex-item-end                                                | Y位于容器的结尾         |      |                                                              |
|                  | flex-just-center                                             | X位于容器的中心         |      |                                                              |
|                  | flex-just-grap                                               | X平均于各行之间留有空白 |      |                                                              |
|                  | flex-just-no-grap                                            | X平均于各行之间没有空白 |      |                                                              |
|                  | flex-just-start                                              | X位于容器的开头         |      |                                                              |
|                  | flex-just-end                                                | X位于容器的结尾         |      |                                                              |
|                  | flex-wrap                                                    | 换行                    |      |                                                              |
|                  | flex-nowrap                                                  | 不换行                  |      |                                                              |
|                  | flex-column                                                  | 竖向排列                |      |                                                              |
|                  | flex-grow                                                    | 占用剩余空间            |      |                                                              |
| inline           | display-inline                                               | 行内元素                |      |                                                              |
| block            | display-block                                                | 块元素                  |      |                                                              |
| inline-block     | display-inline-block                                         | 行内块元素              |      |                                                              |
| text-align       | text-align-center                                            | 文字居中                |      |                                                              |
|                  | text-align-left                                              | 文字居左                |      |                                                              |
|                  | text-align-right                                             | 文字居右                |      |                                                              |
| font-weight      | font-weight-bold                                             | 文字加粗                |      |                                                              |
| width            | width-HP                                                     | 宽度铺满父元素          |      |                                                              |
| height           | height-HP                                                    | 高度铺满父元素          |      |                                                              |
| overflow         | overflow-hidden                                              | XY轴溢出隐藏            |      |                                                              |
|                  | overflowX-hidden                                             | X轴溢出隐藏             |      |                                                              |
|                  | overflowY-hidden                                             | Y轴溢出隐藏             |      |                                                              |
|                  | overflow-auto                                                | XY轴滚动条              |      |                                                              |
|                  | overflowX-auto                                               | X轴滚动条               |      |                                                              |
|                  | overflowY-auto                                               | Y轴滚动条               |      |                                                              |
| white-space      | white-space-nowrap                                           | 文字不换行              |      |                                                              |
| position         | position-r                                                   | 绝对定位                |      |                                                              |
|                  | position-a                                                   | 相对定位                |      |                                                              |
| cursor           | cursor-pointer                                               | 鼠标小手                |      |                                                              |

### 其他方法

Vue3 获取图片

```javascript
//按需加载
import XTT from "@lovels/xtt
const { UnitConfig } = XTT;
UnitConfig.getImageUrl = ((url) => {
  return new URL(`./assets/images/${url}`, import.meta.url).href || '';
})

//全局注册
import XTT from "@lovels/xtt
app.use(XTT, 'Vue3')
//Vue3 获取图片 注册全局方法
if (app.config.globalProperties.$UnitConfig) {
  app.config.globalProperties.$UnitConfig.getImageUrl = ((url) => {
    return new URL(`./assets/images/${url}`, import.meta.url).href || '';
  })
}
proxy.$UnitConfig.getImageUrl('image.png');
```



### 包管理

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

##### 发布

补丁版本
npm version patch

测试版本
npm version prerelease

npm publish --access public

##### 加入组织

npm init --scope=lovels (自行忽略)

##### Node.js
v18.2.0