xuhook

安装

$ npm i xuhook
$ yarn add xuhook

useActive

进入当前路由就触发激活

使用： useActive((route) => {})

useTableCheck

antd table 勾选 hook

使用： const { rowSelection, selectedRowKeys, selectedRows, clearRowChecked, setRowChecked } = useTableCheck()

变量说明：

rowSelection 表格 rowSelection 属性，内部包含 selectedRowKeys，onChange 两个属性

selectedRowKeys 表格选中的 key

selectedRows 表格选中的行数据

clearRowChecked 清除表格勾选

setRowChecked 设置表格勾选

useTableCheck((keys, rows) => {})接收一个函数在勾选后调用并返回表格选中的 key 和表格选中的行数据

useStyle

简单优雅的使用 style 设置自定义样式

使用：const [customStyle] = useStyle('body{ }')

customStyle 只需放入 jsx 里即可 例：<div>{customStyle}</div>

就像在 html 里写 class 样式一样，另外还支持 react css 的写法,需传入指定的类名 const [customStyle] = useStyle({ backgrund: #FF0000 }, className)

useCommon

通过 hook 形式提供公共方法

使用 const { isInteger } = useCommon()

具体方法请查看 hook 内部提供的方法

useBig

通过 hook 形式提供 big.js 常用计算方法

使用 const { plus, minus, times, div, toFixed } = useBig()

plus, minus, times, div 都支持传入多个参数进行计算，例如 plus(1,2,3,4), 返回的都是 number 类型

同时useBig也会为String和Number提供对应的方法，也可通过 '1'.plus(2,3,4)和 1.plus(2,3,4)进行计算和获取值

PS：如存在数组进行计算，可通过 plus(...[1,2,3,4])进行调用，es5 通过 apply 进行调用 plus.apply(null,[1,2,3,4])

toFixed 默认保存 2 位小数，如需指定保留位数，传入第二个参数即可，toFixed(val,2)

useVisible

模态框/弹出框的显示/隐藏 hook

子组件使用 const { record, visible, onHide, onCallBack, onGetData } = useVisible(ref, () => {})

父组件调用 ref.current.show()即可

ref对象api说明：

show({},()=>{}) 可传入 2 个参数，第一个为父组件传递的参数，第二个为显示后需要执行的事件

hide(()=>{}) 支持传入一个回调用于隐藏后需要执行的事件,useVisible 提供的 onHide 方法同理

setData(data) 支持传入一个参数用于通过 useVisible 提供的 onGetData 方法在子组件获取数据

getData(data) 获取 useVisible 提供的 onCallBack 方法传入的数据

useVisible的api说明：

record 父组件传入的参数

visible 显示/隐藏变量

onHide 隐藏方法，同上面的 hide 一样的使用

onCallBack 传入数据，ref 通过 getData 获取数据

onGetData 获取数据，ref 通过 setData 传递数据