@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提示