Z-LabNext

Appearance

API ​

公共下拉选项 ​

语法 ​

new Option(params)

params ​

字段类型默认必填描述
optionsObject-是配置对象

params 属性 ​

字段类型默认必填描述
dataSourceObject[]-是数据源
fieldsNameObject-否选项字段配置

fieldsName 属性 ​

字段类型默认必填描述
labelstring'label'否label 取值字段
valuestring'value'否value 取值字段

方法 ​

名称参数返回描述
updateparams-新配置对象
getLabel 弃用GetLabelOptions-获取 label
getItemByValuestring|numberObject根据 value 来获取对应的下拉选项
getItemByLabelstring|numberObject根据 label 来获取对应的下拉选项
getLabelTextByValueGetLabelTextByValueParamsstring根据 value 来获取对应的 label 文本

GetLabelTextByValueParams 属性 ​

字段类型默认必填描述
valuestring|number-是-
allowReplaceEmptybooleanfalse否是否将空值替换为指定的字符串
replaceStrstring--否用于替换空值的字符串

示例代码 ​

js
import { Option } from "@zlabnext/ztool";

const dataSource = [
  {
    label: "关闭",
    value: 0,
  },
  {
    label: "开启",
    value: 1,
  },
  {
    label: "暂停",
    value: 2,
  },
];

/* 1.初始数据 */
const option = new Option({
  dataSource,
});
// 下拉选项 (一般用于下拉筛选项)
// option.options
// 名称映射对象 (value映射为label)
// option.labelMap

/* 2.更新数据 */
// 添加一个对象
dataSource.push({
  label: "其他",
  value: 3,
});
option.update({ dataSource });
// 清空
option.update({ dataSource: [] });

空值替换 ​

语法 ​

replaceEmpty(value, replaceStr)

参数 ​

字段类型默认描述
valueunknown-原始值
replaceStrstring--空值占位符

示例代码 ​

js
import { replaceEmpty } from "@zlabnext/ztool";

console.log(replaceEmpty(null)); // --
console.log(replaceEmpty(undefined)); // --
console.log(replaceEmpty("")); // --
console.log(replaceEmpty("你好")); // 你好
console.log(replaceEmpty(true)); // true
console.log(replaceEmpty(false)); // false

下载文件 弃用 ​

NOTE

请使用 下载文件 v2

下载文件 v2 ​

语法 ​

downloadFileV2(params)

params ​

字段类型默认必填描述
paramsObject-是配置参数

params 属性 ​

字段类型默认必填描述
typestring-是数据类型 ( 'url'、'arrayBuffer' )
dataSourcestring / ArrayBuffer-是文件 url 或 arrayBuffer
filenamestring-否文件名称

示例代码 ​

js
import { downloadFileV2 } from "@zlabnext/ztool";

/* 根据文件流进行下载，文件流一般从接口返回(例如excel导出) */
// const str = '大道泛兮，其可左右。';
// const encoder = new TextEncoder();
// const encodedData = encoder.encode(str);
// const buffer = new ArrayBuffer(encodedData.byteLength);
// const uint8Array = new Uint8Array(buffer);
// uint8Array.set(encodedData);
// downloadFileV2({
//   type: 'arrayBuffer',
//   filename: 'example.txt',
//   dataSource: buffer,
// })

/* 根据url进行下载 */
const url = "./demo.png"; // 或者提供一个附件资源地址
const filename = "test.png";
downloadFileV2({
  type: "url",
  filename,
  dataSource: url,
});

NOTE

  • 当采用 “url” 方式时，如果是非同源地址，会导致无法下载文件 ( 例如，只打开一个新标签页展示 )
  • 建议用接口获取文件流，然后采用 “arrayBuffer” 方式下载
  • 如果是附件服务的资源地址，则正常下载 ( 前提，附件服务器已配置允许下载 )
  • 如果 web 应用地址是 http 协议，则下载时浏览器会提示是否阻止下载 ( 浏览器的安全策略 )，将资源配置为 https 协议即可。

随机 rgb 色值 ​

示例代码 ​

js
import { getRandomRgb } from "@zlabnext/ztool";

console.log(getRandomRgb()); // 获取一个随机的rgb色值，例：rgb(0, 0, 0)

随机 hex 色值 ​

示例代码 ​

js
import { getRandomHex } from "@zlabnext/ztool";

console.log(getRandomHex()); // 获取一个随机的hex色值，例：#000000

随机 rgb/hex 色值 ​

示例代码 ​

js
import { getRandomColor } from "@zlabnext/ztool";

console.log(getRandomColor({ type: "rgb" })); // 获取一个随机的rgb色值，例：rgb(0, 0, 0)
console.log(getRandomColor({ type: "hex" })); // 获取一个随机的hex色值，例：#000000

图片转 webp 格式 ​

语法 ​

convert2Webp(file, quality)

参数 ​

字段类型默认描述
fileFile | Blob-文件对象
qualitynumber-压缩率 (0~1)

示例代码 ​

js
import { convert2Webp, downloadArrayBuffer } from "@zlabnext/ztool";

// file是文件对象
const webpBlob = convert2Webp(file, 0.6);
// 下载转换后的Webp图片
downloadArrayBuffer(webpBlob, "example.webp");

根据 url 获取文件名及后缀 ​

语法 ​

getFilenameFromUrl(url)

参数 ​

字段类型默认描述
urlstring-文件链接

示例代码 ​

js
import { getFilenameFromUrl } from "@zlabnext/ztool";

const url = "https://www.baidu.com/abc.jpg";

getFilenameFromUrl(url); // abc.jpg

根据 content-disposition 获取文件名及后缀 ​

语法 ​

getFilenameFromDisposition(contentDispotition, decode, decodeCallback)

参数 ​

字段类型默认描述
contentDispotitionstring-响应头内容
decodebooleantrue是否解码
decodeCallbackfunctiondecodeURIComponent解码回调函数

示例代码 ​

js
import { getFilenameFromDisposition } from "@zlabnext/ztool";

// 'example.txt'
console.log(getFilenameFromDisposition('attachment; filename="example.txt"'));
// 'example.txt'
console.log(getFilenameFromDisposition("attachment; filename=example.txt"));
// '中文.txt'
console.log(
  getFilenameFromDisposition(
    "attachment; filename*=UTF-8''%e4%b8%ad%e6%96%87.txt"
  )
);
// null
console.log(getFilenameFromDisposition("attachment"));
// null
console.log(getFilenameFromDisposition(null));

浏览器兼容性提示 废弃 ​

NOTE

推荐使用 bowser

拆分日期区间 ​

一般用来提交给后端

语法 ​

splitDateRange(options)

参数 ​

字段类型必填默认描述
options.dateRangestring[]是-日期区间
options.outStartFieldstring否startDate输出的开始日期字段
options.outEndFieldstring否endDate输出的结束日期字段
options.defaultValuestring | null否null默认值

示例代码 ​

js
import { splitDateRange } from "@zlabnext/ztool";

const result = splitDateRange({
  dateRange: ["2024-11-13", "2024-11-14"],
});

console.log(result); // { startDate: '2024-11-13', endDate: '2024-11-14' }

组合日期区间 ​

一般用来给前端回显。

语法 ​

combineDateRange(options)

参数 ​

字段类型必填默认描述
objRecord<string, string | null>是-对象参数
inStartFieldstring否startDate输入的开始日期字段
inEndFieldstring否endDate输入的结束日期字段

示例代码 ​

js
import { combineDateRange } from "@zlabnext/ztool";

const result = combineDateRange({
  obj: { startDate: "2024-11-13", endDate: "2024-11-14" },
});

console.log(result); // ['2024-11-13', '2024-11-14']

格式化地址字符串 ​

语法 ​

fmtAddressStr(options)

参数 ​

字段类型必填默认描述
options.addressStrstring是-原始地址字符串
options.needSplitboolean否true是否需要分隔
options.splitFlagboolean否true分隔符
options.needJoinboolean否true是否需要拼接
options.joinFlagstring否,拼接符
options.extraStrArrstring[]否额外的字符串数组(例如，详情地址)

示例代码 ​

js
import { fmtAddressStr } from "@zlabnext/ztool";

const result = fmtAddressStr({
  addressStr: "山东省,青岛市,崂山区",
  needSplit: true,
  needJoin: true,
  extraStrArr: ["xx街道xx号"],
  joinFlag: "",
});

console.log(result); // 山东省青岛市崂山区xx街道xx号

数组转字符串 ​

语法 ​

arrToStr(str, joinFlag)

参数 ​

字段类型必填默认描述
strstring是-原始字符串
joinFlagstring否,拼接符

示例代码 ​

js
import { arrToStr } from "@zlabnext/ztool";

const result1 = arrToStr(["1", "2", "3"]);
console.log(result1); // 1,2,3

const result2 = arrToStr(["1", "2", "3"], "");
console.log(result2); // 123

字符串转数组 ​

语法 ​

strToArr(str, splitFlag)

参数 ​

字段类型必填默认描述
strstring是-原始字符串
splitFlagstring否,拼接符

示例代码 ​

js
import { strToArr } from "@zlabnext/ztool";

const result1 = strToArr("1,2,3");
console.log(result1); // ['1', '2', '3']

const result2 = strToArr("1,2,3", "");
console.log(result2); // ['123']

接口错误捕获器 ​

语法 ​

errorTrap(params)

params 属性 ​

字段类型必填默认描述
codestring|number是-接口返回标识
messagestring是-接口返回信息
successCodestring|number否-接口成功标识
successCallback(code, message) => unknown否-接口返回成功回调
errorCodestring|number否-接口失败标识
errorCallback(code, message) => unknown否-接口返回失败回调

示例代码 ​

js
import { setErrorTrapGlobalConfig, errorTrap } from "@zlabnext/ztool";

// 设置全局参数
setErrorTrapGlobalConfig({
  // 0代表成功
  successCode: 0,
  // 成功后的回调函数
  successCallback: (code: number, message: string) => {
    // 这里可以调用提示框
    console.log(`successCallback ${code} ${message}`);
  },
  // 1代表失败
  errorCode: 1,
  errorCallback: (code: number, message: string) => {
    // 这里可以调用提示框
    console.log(`errorCallback ${code} ${message}`);
  },
});

/**
 * 创建用户
 */
const createUser = () => {
  // ...省略逻辑
  const res = request(params);
  const { code, msg } = res.data;
  // 执行错误捕获
  const hasErr = errorTrap({ code, message });
  if (hasErr) {
    console.error("创建用户失败");
    return;
  }
  console.log("创建用户成功");
};

计算页码 ( 删除数据后 ) ​

语法 ​

calcPageAfterDelete(page, pageSize, total)

属性 ​

字段类型必填默认描述
pagenumber是-当前页码
pageSizenumber是-每页条数
totalnumber否-总条数

示例代码 ​

js
import { calcPageAfterDelete } from "@zlabnext/ztool";

const pageProps = {
  page: 2,
  pageSize: 15,
  total: 15,
};

// 模拟删除一条数据
pageProps.total -= 1;

// 重新计算页码
pageProps.page = calcPageAfterDelete(page, pageSize, total);

// 这里会输出: 1
console.log(pageProps.page);