@syyfe/tools
安装
npm install @syyfe/tools --save
yarn add @syyfe/tools --save
api 请求
import { api } from "@syyfe/tools"
请求方式
"get" | "post" | "delete" | "options" | "head" | "put" | "patch" | "text" | "open"
名称 | 描述 |
---|
get | 发送一个 get 方式的请求 |
post | 发送一个 post 方式的请求 |
delete | 发送一个 delete 方式的请求 |
options | 发送一个 options 方式的请求 |
head | 发送一个 head 方式的请求 |
put | 发送一个 put 方式的请求 |
patch | 发送一个 patch 方式的请求 |
text | 返回请求地址 (baseURL + 参数) |
open | 浏览器新窗口打开请求的 url |
使用方法
配置 api
@/api/apis.ts
/**
* @param url 接口地址
* @param baseURL 主域名地址
*/
const apis = {
getConfig: api.get(url, baseURL),
postConfig: api.post(url, baseURL),
deleteConfig: api.delete(url, baseURL),
optionsConfig: api.delete(url, baseURL),
headConfig: api.head(url, baseURL),
putConfig: api.put(url, baseURL),
patchConfig: api.patch(url, baseURL),
textConfig: api.text(url, baseURL),
openConfig: api.open(url, baseURL),
};
export default apis;
使用 api
@/views/index.vue
const data = { name: "lee", age: 1 }
interface UserParams {
name: string;
age: number;
}
interface UserResponse {
code: number;
total: number;
rows: Array<any>;
}
// 1. 请求参数强类型约束
this.$request<UserParams, any>('getConfig', data)
.then(res => {
console.log(res);
}).catch(error=> {
console.log(error)
})
// 2. 响应数据强类型约束
this.$request<any, UserResponse>('getConfig', data)
.then(res => {
console.log(res.rows); // Yes
console.log(res.xxx); // Error
}).catch(error=> {
console.log(error)
})
// 3. 请求 / 响应数据强类型约束
this.$request<UserParams, UserResponse>('getConfig', data)
.then(res => {
console.log(res.rows); // Yes
console.log(res.xxx); // Error
}).catch(error=> {
console.log(error)
})
// 4. 不强类型约束
this.$request('getConfig', data)
.then((res: any) => {
console.log(res);
}).catch(error=> {
console.log(error)
})
NewFormHelper
import { NewFormHelper } from "@syyfe/tools"
使用方法
NewFormHelper.show()
NewFormHelper.input("名称", "name")
...
方法
方法名称 | 描述 |
---|
show | 生成一个 文本 类型的表单 |
input | 生成一个 密码 类型的表单 |
password | 生成一个 密码 类型的表单 |
int | 生成一个 整数 类型的表单 |
mobile | 生成一个 手机号 类型的表单 |
cascader | 生成一个 级联选择 类型的表单 |
select | 生成一个 选择器 类型的表单 |
switch | 生成一个 开关 类型的表单 |
agerange | 生成一个 滑块 类型的表单 |
imageUpload | 生成一个 上传图片 类型的表单 |
checkbox | 生成一个 多选框 类型的表单 |
radio | 生成一个 单选框 类型的表单 |
textarea | 生成一个 文本区 类型的表单 |
date | 生成一个 日期选择 类型的表单 |
time | 生成一个 时间选择 类型的表单 |
dateRange | 生成一个 日期范围选择 类型的表单 |
dateTimeRange | 生成一个 日期时间范围选择 类型的表单 |
slot | 生成一个 自定义 类型的表单 |
show Attributes
参数 | 类型 | 描述 |
---|
other.question | string | 表单Tooltip提示 |
input Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.maxLength | number | 最大长度 |
other.rules | Array | 校验规则 |
other.type | string | 表单类型 |
other.width | string | 宽度 |
other.rows | string | 行数 |
other.prepend | string | 前置文案 |
other.append | string | 后置文案 |
other.customPend | string | 自定义信息 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
password Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.placeholder | string | 占位文本 |
other.maxLength | number | 最大长度 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
int Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.maxLength | number | 最大长度 |
other.rules | Array | 校验规则 |
other.showWordLimit | string | 限制遮挡文本 |
other.width | string | 宽度 |
other.prepend | string | 前置文案 |
other.append | string | 后置文案 |
other.customPend | string | 自定义信息 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
mobile Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.rules | Array | 校验规则 |
other.customPend | string | 自定义信息 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
cascader Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.rules | Array | 校验规则 |
other.width | string | 宽度 |
other.filterable | boolean | 是否可筛选 |
other.options | Array | 值 |
other.checkStrictly | boolean | 严格的遵守父子节点不互相关联 |
other.question | string | 表单Tooltip提示 |
other.element attr | string | 表单Tooltip提示 |
select Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.rules | Array | 校验规则 |
other.filterable | boolean | 是否可筛选 |
other.options | Array | 值 |
other.width | string | 宽度 |
other.multiple | boolean | 是否可以多选 |
other.multipleLimit | number | 最多可以选择的项目数 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
switch Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.rules | Array | 校验规则 |
other.activeValue | any | 打开时的值 |
other.inactiveValue | any | 关闭时的值 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
agerange Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.placeholder | string | 占位文本 |
other.rules | Array | 校验规则 |
other.width | string | 宽度 |
other.min | number | 最小值 |
other.max | number | 最大值 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
imageUpload Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.action | string | 上传的地址 |
other.fileSize | number | 文件大小 |
other.accept | string | 上传的文件类型 |
other.hintContent | string | 提示文案 |
other.question | string | 表单Tooltip提示 |
checkbox Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.options | Array | 值 |
other.question | string | 表单Tooltip提示 |
radio Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.options | Array | 值 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
textarea Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.placeholder | string | 占位文本 |
other.maxLength | number | 最大长度 |
other.width | string | 宽度 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
date Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
time Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.option | Object | selectableRange/format |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
dateRange Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.width | string | 校验规则 |
other.formerOnly | boolean | 是否禁用今天之后 |
other.formerTodayOnly | boolean | 是否禁用今天和之后 |
other.afterToday | boolean | 是否禁用今天之前 |
other.clearable | boolean | 是否可清空 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
dateTimeRange Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.disabled | boolean | 是否禁用 |
other.rules | Array | 校验规则 |
other.format | string | 日期格式 |
other.defaultTime | string | 默认时间 |
other.valueFormat | string | 绑定值的格式 |
other.afterToday | boolean | 是否禁用今天之前 |
other.afterDate | boolean | 是否禁用当前时刻之前 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |
slot Attributes
参数 | 类型 | 描述 |
---|
label | string | 表单域 |
prop | string | 绑定属性值 |
other.if | boolean | 是否显示 |
other.rules | Array | 校验规则 |
other.tip | string | 表单文案提示 |
other.question | string | 表单Tooltip提示 |