vue3hook

介绍

vue3hook 是针对 vue3.x 的一款 composition api 的工具库

安装:

``
npm install --save vue3hook
`

使用:

`javascript
import { useRequest } from 'vue3hook'
`

Api Table of Contents

- useRequest
- useQuickState
- usePageSearch
- useRouteQueryChange
- useSwitch
- useMouse
- useFingerMouse
- useMove
- useFingerMove
- useFullscreen
- useInterval
- useTimeout
- useTitle
- useCountdown
- useWheel

$3

#### Demo:

`html


`

#### Config:

`html

`

$3

#### Demo:

`html


`

#### Config:

`javascript
const {
// 传入的 params，比如：state.name, state.gender
state,
// 原始数据的备份，深拷贝
backupState,
// 拷贝一份当前的 state，深拷贝
clone,
// 重置 state 为原始数据，行为同 lodash.clonedeep
reset,
// 对 state 进行 assign，assign 行为同 lodash.assign
assign: newParams => assign(state, newParams),
// 拷贝一份原始数据，深拷贝
cloneBackup,
} = useQuickState(params = {})
`

$3

#### Demo:

`html


`

#### Config:

`javascript
const {
// state.value
state,
// 设置 value 为 true
on,
// 设置 value 为 false
off,
// 切换 on 和 off
toggle,
// 设置 value，用来做多状态切换
setValue,
// 判断 value，用来做多状态切换
isValue,
} = useSwitch((initValue = false))
`

$3

#### Demo:

`html

`

#### Config:

`javascript
useRouteQueryChange({
// 是否在组件初始化时候立即执行一次，时机为 created
immediate: true,
// 要执行的函数
callback: () => {},
})
`

$3

#### Demo:

`html
// 在搜索列表页，我们经常需要把搜索参数挂到 url 上，并能从 url 上同步参数到搜索参数


`

#### Config:

`javascript
const {
// 此方法会把请求参数挂到 url 上，并触发传入的 onSearch 方法
search,
// 此方法会把 url 上的参数清空，并触发传入的 onSearch 方法
reset,
} = usePageSearch({
// 这是一个 quickState 类型对象，请用上面的 useQuickState 生成
quickState: useQuickState(),
// 定义在把参数挂到 url 上的时候如何序列化和反序列化
format: {
// 参数名
gender: {
// 序列化
stringify: (value) => value,
// 反序列化
parse: (value) => parseInt(value),
},
},
// 当执行 search 方法时候或者 router 参数变化时候触发的回调
onSearch: () => {},
})
`

$3

#### Demo:

`javascript
// state: { screenX, screenY, clientX, clientY, pageX, pageY }
const { state, start, stop } = useMouse(() => {
console.log('mouse move')
})
start()
stop()
`

$3

#### Demo（移动端使用）:

`javascript
const { state, start, stop } = useFingerMouse(() => {
console.log('mouse move')
})
start()
stop()
`

$3

#### Config:

`javascript
const move = useMove([options])
`

#### Demo:

`html


`

$3

#### Config:

`javascript
const move = useFingerMove([options])
`

#### Demo（移动端使用）:

`html


`

$3

#### Config

`javascript
const { state, setFull, exitFull, toggleFull } = useFullscreen(target, [options])
`

#### Demo

`html


`

$3

#### Config

`javascript
const { state, start, stop, restart } = useInterval(callback, (delay = 1000), (immediate = true))
`

#### Demo

`html



`

$3

#### Config

`javascript
const { start, stop } = useTimeout(callback, (delay = 1000), (immediate = true))
`

#### Demo

`html


`

$3

#### Config

`javascript
const state = useTitle((title = document.title), (restoreOnUnmount = false))
`

#### Demo

`html


`

$3

#### Config

`javascript
// state = {
// targetDate
// countdown
// formatted: {
// days
// hours
// minutes
// seconds
// milliseconds
// },
// )
const state = useCountdown(targetDate, (interval = 1000))
`

$3

`html


`

$3

$3

`html


``