Resize

When the size of the document flow wrapped by the component changes, it triggers the resize event. Generally used to monitor changes in DOM dimensions and positions caused by DOM content updates, re-acquire DOM dimensions and positions, and perform calculations for content display.

Basic Usage

Do not add any external styles to this component

<wd-resize @resize="handleResize">
  <view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view>
</wd-resize>

const width = ref<string>('')
const height = ref<string>('')

onReady(() => {
  setTimeout(() => {
    width.value = '100px'
    height.value = '100px'
  }, 1500)
})

function handleResize(detail: Record<string, string | number>) {
  const { height, width, top, right, bottom, left } = detail
  console.log(height, width, top, right, bottom, left)
}

Attributes

Parameter	Description	Type	Optional Values	Default	Version
custom-style	Custom root node style	string	-	-	-
custom-class	Custom root node style class	string	-	-	-
custom-container-class	Custom container style class	string	-	-	-

Events

Event Name	Description	Parameters	Version
resize	Triggered when size changes	{width: number, height: number, top: number, right: number, bottom: number, left: number}	-

Slots

Slot Name	Description	Version
default	Content to monitor for size changes	-

Source Code

Documentation

• Component