0.0.6 • Published 9 months ago
private-tool-library v0.0.6
private-tool-library
杨夕专属工具箱，欢迎使用嗷；部分小功能实现方法，且有额外的扩展，具体方法列表见下文。
| 方法及参数 | 方法介绍 |
|---|---|
| emptyParameterClear(data?: any, type?: 'default' |'type'|'field', rules?:null):any | 去除对象、数组中的空字段 |
| dateFormat(format: string, date?: Date): string | 时间格式化 |
| deepCopy<T>(obj: T): T | 深度拷贝 |
| getUUID() | 生成uuid |
| handleTree(data: any[], id: string, parentId?: string, children?: string):any[] | 构造树型结构数据 |
| iterationQuery(data: Array<any>, id: any, idKey: string = "id", children: string = 'children'):any[] | 检索深度 |
| lookNodeData(data: Array<any>, id: any, idKey: string = "id", children: string = 'children') | 查找节点数据 |
| objectGenerateString(obj: any, connectStr = "=", intervalKey = "&") | 将对象变为url字符串-仅限一层 |
| untieUrl(url: string): any | 解构url |
| randomList<T>(list: Array<T>): T | 获取列表中的随机值 |
| mergeObjects(obj1,obj2,type,recursion) | 合并两个对象 |
| copyToClipboard(text: string): void | 复制内容到剪贴板 |
| enterFull(element: HTMLElement): void | 将element元素全屏 |
| exitFull(): void | 退出全屏 |
| checkFullScreen(): Element |null | 当前处于全屏的元素 |
| isFullScreen(): boolean | 判断是否全屏 |
| toggle(element: Element): void | 全屏切换 |
| new WaterFlow(options: WaterFlowOptions) | 瀑布流布局类 |
瀑布流布局特殊说明：需要排版的盒子必须给上属性data-item，如果有需要加载的远程图片，则图片上面需要加上属性data-image。因为是使用定位的方式布局，请参考如下css。使用方式如下：
不是很好的解决方法，这里主要提供思路吧，不推荐使用，实际中，构建会很慢，主要是加载远程图片；依次对card布局时，需要等待远程图片加载完成才会布局。
<div class="view" id="view">
<div class="view__image" :id="'view__image_' + index" v-for="(item, index) in dataList" :key="index" data-item>
<img :src="item" alt="" class="image" :id="'image_' + index" data-image />
<div class="view__main">
<p>欢乐每一天</p>
<p>描述描述datasetdatasetdatasetdatasetdataset</p>
</div>
</div>
</div> let waterFlow = new WaterFlow({
element: document.getElementById("view"),
itemWidth: 300,
bottomHeight: 50,
refreshCallback: () => {
addData()
}
}).view {
resize: both;
border: 1px solid #000;
width: 950px;
height: 600px;
overflow: auto;
position: relative;
}
.view__image {
width: 300px;
position: absolute;
display: none;
}
.image {
width: 100%;
}后续还有很多好玩的小案例嗷，别放弃，坚持更新，加油吖！
// 官方镜像源
npm config set registry https://registry.npmjs.org/
// 淘宝镜像源
npm config set registry https://registry.npmmirror.com/
// 发布
npm publish