shop-wx/doc/wot-design-uni/docs/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	需要监听尺寸变化的内容	-