Dom - Dom相关Hooks和操作函数

useWindowSize

监控窗体大小变化

• 定义 function useWindowSize(onResize?: ResizeHandler): IElementSize
• 类型
  • type ResizeHandler = (size: IElementSize) => void
  • interface IElementSize {width: number; height: number;}
• 用法

  1import React from 'react'
  2import {useWindowSize, IElementSize} from '@co-hooks/util'
  3
  4interface IDemoProps {
  5    onChange: (size: IElementSize) => void
  6}
  7
  8function DemoComponent(props: IDemoProps) {
  9
  10    const size = useWindowSize(props.onChange);
  11
  12    return (
  13        <div>{size.width} * {size.height}</div>
  14    )
  15}

getZIndex

获取一个新的用于展示的zIndex，建议弹层每次show的时候，更新一下，保证不被挡住

• 定义 function getZIndex(): number
• 用法

  1import React from 'react'
  2import {getZIndex} from '@co-hooks/util'
  3
  4function DemoComponent() {
  5
  6    const zIndex = getZIndex();
  7
  8    return (
  9        <div style={{zIndex}}/>
  10    )
  11}
  12