$ npm i xuhook
$ yarn add xuhook
进入当前路由就触发激活
使用: useActive((route) => {})
antd table 勾选 hook
使用: const { rowSelection, selectedRowKeys, selectedRows, clearRowChecked, setRowChecked } = useTableCheck()
变量说明:
rowSelection 表格 rowSelection 属性,内部包含 selectedRowKeys,onChange 两个属性
selectedRowKeys 表格选中的 key
selectedRows 表格选中的行数据
clearRowChecked 清除表格勾选
setRowChecked 设置表格勾选
useTableCheck((keys, rows) => {})接收一个函数在勾选后调用并返回表格选中的 key 和表格选中的行数据
简单优雅的使用 style 设置自定义样式
使用:const [customStyle] = useStyle('body{ }')
customStyle 只需放入 jsx 里即可 例:<div>{customStyle}</div>
就像在 html 里写 class 样式一样,另外还支持 react css 的写法,需传入指定的类名 const [customStyle] = useStyle({ backgrund: #FF0000 }, className)
通过 hook 形式提供公共方法
使用 const { isInteger } = useCommon()
具体方法请查看 hook 内部提供的方法
通过 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)
模态框/弹出框的显示/隐藏 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 传递数据