mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
* docs(button): 更新按钮组件文档对开放能力的描述 - 修改 session-message-title 和 session-message-path 属性名称 - 新增 chooseavatar 和 agreeprivacyauthorization 事件回调 * docs(icon): 更新图标组件文档 - 调整属性描述,明确 name 属性可用于图标名称或图片链接 - 添加事件列表,明确 click 事件的参数 - 移除英文示例代码中不必要的示例和图标列表 - 优化文档结构和格式,使信息更加清晰 * docs(config-provider): 更新全局配置组件文档 - 调整文档中的强调样式,使用加粗替代下划线 - 完善英文文档缺失的内容,保持和中文文档一致 * docs(component): 更新 Popup 组件文档 - 调整文档结构,优化标题层级 - 添加 v-model 使用示例,明确组件绑定值 - 移除冗余的代码示例,精简文档内容 - 更新属性表格,统一属性描述 - 添加防止滚动穿透的解决方案说明 * docs(resize): ✏️ 更新 resize 组件文档 - 修正事件名称从 `size` 改为 `resize` - 添加组件属性(Attributes)、事件(Events)和插槽(Slots)的详细说明 - 更新文档结构,使其更加完整和易于理解 * docs(transition): ✏️完善Transition 动画组件文档的属性和事件描述 - 增加自定义根节点样式类、懒渲染、动画结束后销毁子节点等属性 - 添加进入和离开过渡的开始、激活和结束状态类 - 新增点击事件和默认插槽 - 更新文档以反映新增功能 * docs(fab): ✏️更新fab组件文档 - 优化了文档结构,调整了部分格式 - 添加了 Methods 和 default Slot 相关的信息 - 更新了 custom-style 属性的命名 * docs(component): ✏️ 更新 Text 组件文档 - 优化文档格式,调整表格结构 - 添加缺失的参数说明和示例代码 - 更新参数类型和默认值 - 增加 call 参数说明 - 补充 Slots 表格 * docs(root-portal): ✏️ 更新组件文档 - 添加 Attributes 和 Events 部分,说明该组件无相关配置 - 修正 Slots 部分的版本信息,统一为 1.11.0 - 更新中文和英文文档
1.5 KiB
1.5 KiB
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 | 需要监听尺寸变化的内容 | - |