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
html
<wd-resize @resize="handleResize">
<view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view>
</wd-resize>
typescript
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 | - |