[TOC]

简介

XTT-JS框架，公共方法、组件、样式集合。

使用

安装

npm i @lovels/xtt

引用

// 全局注册
import XTT from "@lovels/xtt
import "@lovels/xtt/style.css"; // 引用公共样式
app.use(XTT, 'Vue3')


// 按需使用
import XTT from "@lovels/xtt
const { UnitConfig, ··· } = XTT;

方法

UnitConfig

常用方法

深拷贝

//deepClone
const { UnitConfig } = XTT;
let oldData = {};
let newData = UnitConfig.deepClone(oldData);

扁平树结构

//flatTree
const { UnitConfig } = XTT;
let oldList = [];
let newList = [];
UnitConfig.flatTree(oldList, newList);

生成UUID

//getUUID
const { UnitConfig } = XTT;
UnitConfig.getUUID(`自定义前缀名称 || 空`);

判断是否可以JSON.parse

//isJSON
const { UnitConfig } = XTT;
UnitConfig.isJSON(`String`);

防抖

//debounce
//fun 需要执行的函数  function
//wait 等待时间   number 毫秒
//immediate 立即执行   boolean
const { UnitConfig } = XTT;
UnitConfig.debounce(fun, wait, immediate);

判断是否为空（undefined，null，‘’ ）

//isNil
//value 需要判断的内容
//return boolean
const { UnitConfig } = XTT;
UnitConfig.isNil(value);

设置Tab

 /**
 * 设置Tab
 * @param {String} name 
 * @param {Object} tab1 
 */
const { UnitConfig } = XTT;
UnitConfig.setTab(name, tab1);

获取Tab

 /**
 * 获取Tab
 * @param {String} name 
 * @param {String} tab 
 * @returns {(String | *)}
 */
const { UnitConfig } = XTT;
UnitConfig.getTab(name, tab);

筛选tab当前active

/**
 * 筛选tab当前active
 * @param {Array} list 
 * @param {String} key 
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 * @returns {String}
 */
const { UnitConfig } = XTT;
UnitConfig.tabActive(list, key, pageKey);

存储筛选项

/**
 * 存储筛选项
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 */
const { UnitConfig } = XTT;
UnitConfig.setScreen(name, keys, pageKey);

获取筛选项

/**
 * 获取筛选项
 * @param {String} pageKey  = 'tabActive'  页面级存储名称
 */
const { UnitConfig } = XTT;
UnitConfig.getScreen(name, pageKey);

编译筛选数据

/**
 * 编译筛选数据
 */
const { UnitConfig } = XTT;
UnitConfig.getFiltrateData(FiltrateList = []);

参数处理

/**
* 参数处理
* @param {*} params  参数
*/
const { UnitConfig } = XTT;
UnitConfig.tansParams(params);

字符串格式化(%s )

/**
* 字符串格式化(%s )
*/
const { UnitConfig } = XTT;
UnitConfig.sprintf(str);

时间/日期

判断ios|安卓

/**
 * 判断ios|安卓
 * @returns {String} ios | android
 */
const { UnitConfig } = XTT;
UnitConfig.appSource();

new Date ios -转为/

/**
 * new Date  ios -转为/
 * @param {(String | Date)} data 
 * @returns {(String | Date)}
 */
const { UnitConfig } = XTT;
UnitConfig.isIosDate(data);

日期时间格式化

//Format
const { UnitConfig } = XTT;
UnitConfig.Format( new Date(), "yyyy-MM-dd hh:mm:ss" )

获取时间

/**
 * 获取时间
 * @param {(String | Date | *)} [date] 
 * @returns {Date}
 */
const { UnitConfig } = XTT;
UnitConfig.getDate(date);

获取当前时间 格式：YYYY-MM-DD

/**
 * 获取当前时间 格式：YYYY-MM-DD
 */
const { UnitConfig } = XTT;
UnitConfig.getTimt_YMD(data, type = "YYYY-MM-DD");

获取两个日期间的所有日期

/**
 * 获取两个日期间的所有日期
 */
const { UnitConfig } = XTT;
UnitConfig.getBetweenDate(start, end);

获取下/上n个秒,分钟,小时,天,月,年

/**
 * 获取下/上n个秒,分钟,小时,天,月,年
 */
const { UnitConfig } = XTT;
UnitConfig.getBeforeOrAfter(original, type, n, format);

获取某月第一天和最后一天

/**
 * 获取某月第一天和最后一天
 */
const { UnitConfig } = XTT;
UnitConfig.getMonthFirstAndLast(date = new Date());

获取某天的周一和周日

/**
 * 获取某天的周一和周日
 */
const { UnitConfig } = XTT;
UnitConfig.getWeekFirstAndLast(date = new Date());

分钟数转 返回: 小时:分钟

/**
 * 分钟数转 返回: 小时:分钟
 */
const { UnitConfig } = XTT;
UnitConfig.minuteToTime(min);

获取两个时间差转化为天,小时,分钟,秒

/**
 * 获取两个时间差转化为天,小时,分钟,秒
 */
const { UnitConfig } = XTT;
UnitConfig.getDateDiff(from, to, unit);

日期格式化

/**
* 日期格式化
*/
const { UnitConfig } = XTT;
UnitConfig.parseTime(time, pattern);

添加日期范围

/**
* 添加日期范围
*/
const { UnitConfig } = XTT;
UnitConfig.addDateRange(params, dateRange, propName);

图片/文件转换

base64转换为blob

/**
 * base64转换为blob
 * @param {String} urlData 
 * @returns {Blob}
 */
const { UnitConfig } = XTT;
UnitConfig.dataURLtoFile(urlData);

验证是否为blob格式

/**
 * 验证是否为blob格式
 */
const { UnitConfig } = XTT;
UnitConfig.blobValidate(data);

url转base64

/**
 * url转base64
 */
const { UnitConfig } = XTT;
UnitConfig.urlToBase64(url);

blob转换为file

/**
 * blob转换为file
 */
const { UnitConfig } = XTT;
UnitConfig.blobToFile(newBlob, fileName);

base64补全

/**
 * base64补全
 */
const { UnitConfig } = XTT;
UnitConfig.vtBbace64(base);

图片压缩

/**
 * 图片压缩
 */
const { UnitConfig } = XTT;
UnitConfig.imageCompress(image);

获取图片base64

/**
 * 获取图片base64
 */
const { UnitConfig } = XTT;
UnitConfig.getBase64(img, callback);

图片按比例缩放

/**
 * 图片按比例缩放
 */
const { UnitConfig } = XTT;
UnitConfig.imageEqualScaling(img, tt = 700);

修改图片背景色

/**
 * 修改图片背景色
 */
const { UnitConfig } = XTT;
UnitConfig.setImageBack(image, color = "", name = "image");

图形压缩

/**
 * 图形压缩
 */
const { UnitConfig } = XTT;
UnitConfig.etOriginalFile(image, quality);

链接

判断url是否是http或https

//isHttp
const { UnitConfig } = XTT;
UnitConfig.isHttp(`http://localhost:8080`);

判断path是否为外链

//isExternal
const { UnitConfig } = XTT;
UnitConfig.isExternal(`http://localhost:8080`)

url判断有效

/**
 * url是否有效
 * @param {string} url
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validURL(url);

颜色

hex颜色转rgb颜色

//hexToRgb
const { UnitConfig } = XTT;
UnitConfig.hexToRgb(`String`);

rgb颜色转Hex颜色

//rgbToHex
const { UnitConfig } = XTT;
UnitConfig.rgbToHex(r, g, b);

变浅颜色值

//getLightColor
const { UnitConfig } = XTT;
UnitConfig.getLightColor(color, level);

变深颜色值

//getDarkColor
const { UnitConfig } = XTT;
UnitConfig.getDarkColor(color, level);

随机颜色值

//randomHexColor
const { UnitConfig } = XTT;
UnitConfig.randomHexColor();

其他方法

本地缓存localStorage

/**
 * 本地缓存
 * 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

/**
 * 会话级缓存
 * 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);

关闭微信浏览器窗口

/**
 * 关闭微信浏览器窗口
 * @param {*} next 
 */
const { UnitConfig } = XTT;
UnitConfig.WeixinJSBridgeClose(next);

转换字符串，undefined,null等转化为""

/**
* 转换字符串，undefined,null等转化为""
*/
const { UnitConfig } = XTT;
UnitConfig.parseStrEmpty(str);

数据合并

/**
* 数据合并
*/
const { UnitConfig } = XTT;
UnitConfig.mergeRecursive(source, target);

构造树型结构数据

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
const { UnitConfig } = XTT;
UnitConfig.handleTree(data, id, parentId, children);

返回项目路径

/**
 * 返回项目路径
 */
const { UnitConfig } = XTT;
UnitConfig.getNormalPath(p);

小写字母判断有效

/**
 * 小写字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validLowerCase(str);

大写字母判断有效

/**
 * 大写字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validUpperCase(str);

字母判断有效

/**
 * 字母判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validAlphabets(str);

邮箱判断有效

/**
 * 邮箱判断有效
 * @param {string} email
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.validEmail(email);

字符串判断有效

/**
 * 字符串判断有效
 * @param {string} str
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.isString(str);

是否为数组

/**
 * 是否为数组
 * @param {Array} arg
 * @returns {Boolean}
 */
const { UnitConfig } = XTT;
UnitConfig.isArray(arg);

转驼峰

/**
 * 转驼峰
 */
const { UnitConfig } = XTT;
UnitConfig.toHump(name);

驼峰转下划线

/**
 * 驼峰转下划线
 */
const { UnitConfig } = XTT;
UnitConfig.toLine(name);

将表情转为字符

/**
 * 将表情转为字符
 */
const { UnitConfig } = XTT;
UnitConfig.utf16toEntities(str);

将字符转为表情

/**
 * 将字符转为表情
 */
const { UnitConfig } = XTT;
UnitConfig.uncodeUtf16(str);

SHA1加密

/**
 * SHA1加密
 */
const { UnitConfig } = XTT;
UnitConfig.encodeUTF8(s);

退出钉钉应用

/**
 * 退出钉钉应用
 */
const { UnitConfig } = XTT;
UnitConfig.closeDing(next = () => { });

获取当前终端

/**
 * 获取当前终端
 */
const { UnitConfig } = XTT;
UnitConfig.isPLUS(keys);

是否为null

/**
 * 是否为null
 */
const { UnitConfig } = XTT;
UnitConfig.isNull(value);

对象数组针对某个字段去重

/**
 * 对象数组针对某个字段去重
 */
const { UnitConfig } = XTT;
UnitConfig.uniqueArray(arr, field);

字典转换

/**
 * 字典转换
 */
const { UnitConfig } = XTT;
UnitConfig.translateDict(id, dictList);

获取多个字典时匹配字典类型

/**
 * 获取多个字典时匹配字典类型
 */
const { UnitConfig } = XTT;
UnitConfig.matchDictType(code, list);

获取多个枚举时匹配枚举类型

/**
 * 获取多个枚举时匹配枚举类型
 */
const { UnitConfig } = XTT;
UnitConfig.matchEnumType(code, list);

数组根据某个属性分组

/**
 * 数组根据某个属性分组
 */
const { UnitConfig } = XTT;
UnitConfig.groupArray(array, key);

BUS 事件总线

const { Bus } = XTT;

// 挂载
Bus.$on(`自定义名称`, (res) => {
    console.log(`回调`)
});

// 触发
Bus.$emit(`自定义名称`, `传参 || 空`);

// 卸载
Bus.$off(`自定义名称`);// 卸载
Bus.$off([`自定义名称`, `自定义名称`]);// 批量卸载
Bus.$off();// 批量卸载

webSocket

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 水印

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-0fS-1···fS-40 | | border | border-base-1border-light-1border-lighter-1border-extra-light-1 | 边框颜色宽度 | 0-5 | border-base-1borderT-base-1borderB-base-1borderTB-base-1borderL-base-1borderR-base-1borderLR-base-1 | | border-radius | border-radius-1 | 边框圆角 | 0-10 | border-radius-0border-radius-1···border-radius-10 | | padding | padding-1 | padding | 0-40 | padding-1paddingT-1paddingB-1paddingTB-1paddingL-1paddingR-1paddingLR-1 | | margin | margin-1 | margin | 0-40 | margin-1marginT-1marginB-1marginTB-1marginL-1marginR-1marginLR-1 | | overFlow | overFlow-1 | 文字溢出 | 0-10 | overFlow-0overFlow-1···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 获取图片

//按需加载
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 [ | 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