# optimus-vue-hooks > vue hooks Latest version **1.4.9** (published 2024-05-09) · ISC license · 0 weekly downloads ## Install ```sh npm install optimus-vue-hooks pnpm add optimus-vue-hooks yarn add optimus-vue-hooks bun add optimus-vue-hooks ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.9 | | Published | 2024-05-09 | | First published | 2022-12-13 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 30.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | zhangjiancheng | | Maintainers | zhangjianchengzzz | ## Links - npm: https://www.npmjs.com/package/optimus-vue-hooks - Repository: https://github.com/chezhuhui/Front-Optimus-Vue-Hooks - Homepage: https://github.com/chezhuhui/Front-Optimus-Vue-Hooks#readme - Issues: https://github.com/chezhuhui/Front-Optimus-Vue-Hooks/issues - npm.io page: https://npm.io/package/optimus-vue-hooks ## Dependencies (2) - [vue-demi](https://npm.io/package/vue-demi.md) latest - [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21 ## Recent versions - 1.4.9 (latest) — 2024-05-09 - 1.4.8 — 2024-01-22 - 1.4.7 — 2023-10-24 - 1.4.6 — 2023-08-30 - 1.4.5 — 2023-08-25 - 1.4.4 — 2023-08-18 - 1.4.3 — 2023-07-26 - 1.4.2 — 2023-07-26 - 1.4.1 — 2023-06-30 - 1.3.3 — 2023-06-28 - 1.3.2 — 2023-06-27 - 1.3.1 — 2023-06-25 - 1.3.0 — 2023-06-16 - 1.2.12 — 2023-05-24 - 1.2.11 — 2023-05-24 - … 13 more at https://npm.io/package/optimus-vue-hooks/versions ## README # Front-Optimus-Vue-Hooks ### 适用于Vue2.x/Vue3.x的公共Hooks库，支持Typescript --- #### 安装 ```shell npm i optimus-vue-hooks ``` ### useRouter() ```javascript // 示例 const router = useRouter() router.push() router.replace() ``` ### useRoute() ```javascript // 示例 const {query} = useRoute() console.log(query) ``` ### useStore() ```javascript // 示例 const {state} = useState() console.log(state) ``` ### useRequest() ```javascript // 示例 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() ```javascript // 示例 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() ```javascript // 示例 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() ```javascript // 示例 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`组件的一个简单的**状态/事件**封装 ```javascript // 示例 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`的值即可。 ```typescript // 示例 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 | | --- _Source: https://npm.io/package/optimus-vue-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._