optimus-vue-hooks v1.4.8
Front-Optimus-Vue-Hooks
适用于Vue2.x/Vue3.x的公共Hooks库,支持Typescript
安装
npm i optimus-vue-hooks
useRouter()
// 示例
const router = useRouter()
router.push()
router.replace()
useRoute()
// 示例
const {query} = useRoute()
console.log(query)
useStore()
// 示例
const {state} = useState()
console.log(state)
useRequest()
// 示例
const {loading, toggleLoading, setRequest} = useRequest(requestFn, immediate)
参数
name | Type | Description | Required |
---|---|---|---|
requestFn | () => Promise | 请求的异步函数 | true |
immediate | boolean | 是否在组件渲染完成后立刻调用 | false |
返回
name | Type | Description | Required |
---|---|---|---|
loading | Ref<boolean> | 是否处于请求中,用于loading提示 | |
toggleLoading | () => void | 手动切换loading状态 | |
setRequest | object | 手动发起请求 | false |
wrapper | () => Promise | 多个异步请求包装 | false |
useForm()
// 示例
const {
form,
formRef,
setFormFields,
resetFormFields,
formValidate
} = useForm({
a: 1,
b: 2
}, ['a'])
参数
name | Type | Description | Required |
---|---|---|---|
source | object | 表单数据源,必填 | true |
requiredFields | array | 必填选项的keys | false |
返回
name | Type | Description | Required |
---|---|---|---|
form | Reactive<object> | 表单 | |
formRef | Ref<any> | 表单实例 | |
setFormFields | (object, Array) => void | 填充表单,第二个参数为填充时忽略的属性名 | true |
resetFormFields | () => void | 重置表单 | |
formValidate | (defineValidate:(resolve,reject) => Promise) => Promise | 可传入自定义验证方法,须手动resolve/reject | false |
useTable()
// 示例
const {
loading,
tableSource,
pagination,
handlePageChange,
handleSizeChange,
initTableSource,
resetPageValue,
resetSizeValue
} = useTable(requestFn, params, {page: 1, size: 10})
参数
name | Type | Description | Required |
---|---|---|---|
requestFn | () => Promise | 请求的异步函数 | true |
params | object 或 () => object | 查询字段,可传object或以函数返回object | true |
options | object | 额外参数(page, size) | false |
返回
name | Type | Description | Required |
---|---|---|---|
loading | Ref<boolean> | 是否正在加载 | |
tableSource | Ref<any[]> | 表格数据源 | |
pagination | { page: number, size: number, total: number } | 分页器数据源 | |
handlePageChange | (value: number) => void | 分页器切换分页事件 | |
handleSizeChange | (value: number) => void | 分页器切换页大小事件 | |
initTableSource | () => Promise | 获取数据 | |
resetPageValue | (cb?: Function) => void | 重置页,可传回调 | |
resetSizeValue | (cb?: Function) => void | 重置页数,可传回调 |
useUpload()
// 示例
const {
fileAccept,
inputAccept,
resolveFileType,
resolveFileSize,
resolveImageSize
} = useTable(['png', 'jpg', 'jpeg', 'gif'])
参数
name | Type | Description | Required |
---|---|---|---|
fileType | string[] | 限制的文件类型 | true |
返回
name | Type | Description | Required |
---|---|---|---|
fileAccept | Ref<string[]> | 传入的限制的文件类型 | |
inputAccept | Ref<string> | 用于input标签accept使用 | |
resolveFileType | (file: File) => undefined 或 boolean | 校验文件类型 | true |
resolveFileSize | (file: File, size: number, unit?: 'kb' 或 'mb') => void | 校验文件大小,单位默认为kb | file必传 |
resolveImageSize | (file: File, size: {width:number, height:number}, unit: 'equal' 或 'less' 或 'greater') => Promise | 校验图片尺寸,传0为不校验。单位可选,等于、小于等于、大于等于,默认为小于等于 | file必传 |
useModal
dialog/modal
组件的一个简单的状态/事件封装
// 示例
const {
visible,
toggleVisible,
showModal,
closeModal
} = useModal()
返回
name | Type | Description | Required |
---|---|---|---|
visible | Ref<boolean> | modal显隐 | |
toggleVisible | (status: boolean) => void | 手动控制modal状态 | true |
showModal | (cb?: Function) => void | 显示modal | |
closeModal | (cb?: Function) => void | 隐藏modal |
useDateRangePick
适用于PC端el-date-picker
组件,由于后端储存的是两个字段而el-date-picker
用数组
储存,因此做一个处理。
dateValue
由computed
做了get/set
处理,直接绑定到v-model
即可,将handleDateChange
绑定到@change
,
dateValue
和form
的startTimeKey/endTimeKey
是联动的,需要清除dateValue
时直接清除startTimeKey/endTimeKey
的值即可。
// 示例
const form = reactive({
startTime: '',
endTiem: ''
})
// dateValue由computed做了get/set处理
// 因此直接绑定到v-model即可,将handleDateChange绑定到@change
// suffix可在后面加上自定义的时间后缀,这个不常用,一般用于type = daterange需要加时间戳的情况
const { dateValue, handleDateChange } = useDateRangePick(form, {
startTimeKey: 'startTime',
endTimeKey: 'endTime',
startEmptyValue: '',
endEmptyValue: '',
startTimeSuffix: '00:00:00',
endTimeSuffix: '23:59:59'
})
参数
name | Type | Description | Required |
---|---|---|---|
form | object | 表单 | true |
options | object | key必填,emptyValue选填,默认为' ', suffix选填,默认为undefined |
返回
name | Type | Description | Required |
---|---|---|---|
dateValue | WritableComputedRef<any[]> | 用于绑定组件的v-model | |
handleDateChange | (event) => void | 用于绑定组件的@change |
4 months ago
7 months ago
8 months ago
12 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago