52 lines
1.5 KiB
Markdown
52 lines
1.5 KiB
Markdown
|
# Resize 监听元素尺寸变化
|
||
|
|
|
||
|
|
当组件包裹的文档流尺寸发生变化时，触发 `resize` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化，重新获取 dom 尺寸和位置，进行内容展示的计算操作。
|
||
|
|
|
||
|
|
|
||
|
|
## 基本用法
|
||
|
|
|
||
|
|
> 不要给此组件增加任何外部样式
|
||
|
|
|
||
|
|
```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
|
||
|
|
|
||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
|
|
|-----|------|-----|-------|--------|---------|
|
||
|
|
| 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 | 需要监听尺寸变化的内容 | - |
|