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 | |