Module vx-hooks/useSize

useSize

• useSize(target?: Ref<HTMLElement | undefined>): { element: Ref<undefined | HTMLElement>; observer: Ref<undefined | MutationObserver>; state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>; watchStop: WatchStopHandle }

• 响应尺寸变化

  example

  <div id='box' ref='element' :style='style' @click='onChange'> {{ state }} </div>
  
  const style = ref({width: '100px', height: '100px', background: 'orange'})
  const { state, element } = useSize()
  const onChange = () => {
   style.value = {...style.value, width: `${parseInt(Math.random() * 400)}px`, height: `${parseInt(Math.random() * 400)}px`}
  }
  
  

  Parameters

  • Optional target: Ref<HTMLElement | undefined>

    预设dom

  Returns { element: Ref<undefined | HTMLElement>; observer: Ref<undefined | MutationObserver>; state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>; watchStop: WatchStopHandle }

  • element: Ref<undefined | HTMLElement>

  • observer: Ref<undefined | MutationObserver>

  • state: Ref<{ clientHeight: number; clientWidth: number; height: number; offsetHeight: number; offsetWidth: number; scrollHeight: number; scrollWidth: number; width: number }>

  • watchStop: WatchStopHandle