---

url: 'https://wot-ui.cn/component/resize.md'

Resize 监听元素尺寸变化

当组件包裹的文档流尺寸发生变化时，触发 resize 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化，重新获取 dom 尺寸和位置，进行内容展示的计算操作。

基本用法

不要给此组件增加任何外部样式

<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

| custom-style | 自定义根节点样式 | string | - | - | - |
| custom-class | 自定义根节点样式类 | string | - | - | - |
| custom-container-class | 自定义容器样式类 | string | - | - | - |

Events

| resize | 尺寸发生变化时触发 | {width: number, height: number, top: number, right: number, bottom: number, left: number} | - |

Slots

| default | 需要监听尺寸变化的内容 | - |