0.0.5 • Published 3 years ago
guantou-hooks v0.0.5
vue3的hooks库
- 尚不完善,没写任何测试用例
install
npm install guantou-hooks
useBoolean
- 管理布尔值
count { bool, toggle, setFalse, setTrue} = useBoolean(false);
- 入参:初始真假性
- toggle :无参数时切换bool的真假 有参数时,切换bool至参数的真假性
- setFalse/setTrue:切换至假/真
useLocalStorage
- 管理useLocalStorage
const { value, setValue } = useLocalStorage("test");
- 入参: localStorage的key:string
useMouse
- 实时获取鼠标位置
const {x,y} = useMouse();
- x/y: 鼠标此时的坐标
useStep
- 管理步骤
const { nowStepIndex, nowStep, next, back, jump } = useStep(['step1','step2','step3'],0)
- 入参1: any[] step列表
入参2: number defaultIndex 初始的第几步
nowStepIndex: 目前的步数
- nowStep: 目前的step值
- next:Function 下一步
- back:Function 上一步
- jump(number): 跳跃至某一步
useUrlState
- 管理路由的search部分(排他)
const { data, clear, reset } = useUrlState({ page: 1, pageSize: 10 });
useLoading
- 管理loading状态
const { loading, startSync, start, end } = useLoading(false,300);
- 入参1: 初始的loading状态
- 入参2: 调用start时的延迟时间,在延迟之后开始loading
- loading:bool
- startSync:不延迟,直接开始loading
- start:在延迟之后开始loading
- end:结束loading
useClickAway
- 响应目标元素之外的点击事件
<div ref="el"></div>
setup(){
const el = useClickAway(callback:(e: MouseEvent) => any);
return {
el
}
}
useOnline
- 是否断网
const isOnline = useOnline(
{ onOnLine, onOffline }:{
onOnLine?: () => any;
onOffline?: () => any;
} = {}
);
useSize
- 监控某个dom元素的大小改变
<div ref="el"></div>
setup(){
type Size = { width?: number, height?: number };
const {el,size} = useSize(onResize?: (size: Size) => any);
return {
el
}
}
useTextSelection
- 监控用户选中的文本内容和位置
<div ref="el"></div>
interface ISelection {
top: number;
left: number;
bottom: number;
right: number;
height: number;
width: number;
text:string;
}
setup(){
const {el,selection:ISelection} = useTextSelection(isBody = false);
return {
el
}
}
- 若
isBody
为true
,会监听整个页面的选中
useVirtualList
- 虚拟滚动
<template>
<div style="height: 400px; overflow: auto" v-bind="containerBinds">
<div v-bind="wrapperBinds">
<div
v-for="(item, index) in showList"
:key="index"
v-bind="item.binds"
>
{{ item.value }}
</div>
</div>
</div>
</template>
setup() {
let originList = ref([] as number[]);
const {
containerEl,
containerBinds,
wrapperBinds,
showList,
reBuild,
} = useVirtualList(originList, (i) => 20 + i);
onMounted(() => {
originList.value = Array(1000)
.fill(0)
.map((_, i) => i);
});
return {
containerEl,
showList,
containerBinds,
wrapperBinds,
reBuild,
};
},
- useVirtualList<T = any>参数
- originList: 可以是一个纯数组T[],也可以是一个响应式数组Ref<T[]>,如果数组是响应式的,只会响应浅层修改,如果手动修改了originList中的某个具体项,请手动调用
reBuild
- itemHeight: number | ((index: number, item: T) => number)
- 列表每一项的高度,因为虚拟滚动的要求,数组每一项的高度必须是可以确定的,不能由内部元素动态决定
- options:{} 可选, 配置项
- elName:string,默认"默认containerEl" 绑定ref的key名,考虑到一个页面上可能会有多个虚拟列表,所以需要自定义elName,这里填写的任何值,都需要从在
useVirtualList
的返回值中接受,并在setup函数中返回,他会体现在containerBinds
中 - offset: 上下各额外显示多少个元素,默认5 ,不可小于1;
- cellOverflow:string 子元素的overflow属性,默认auto
- elName:string,默认"默认containerEl" 绑定ref的key名,考虑到一个页面上可能会有多个虚拟列表,所以需要自定义elName,这里填写的任何值,都需要从在
- originList: 可以是一个纯数组T[],也可以是一个响应式数组Ref<T[]>,如果数组是响应式的,只会响应浅层修改,如果手动修改了originList中的某个具体项,请手动调用