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