optimus-vue-hooks

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