Resize 元素尺寸监听

介绍

监听组件包裹的元素尺寸变化，获取实时的尺寸和位置，便于内容的展示计算。

基础用法

通过 @resize 监听元素尺寸的实时 width、height 变化。

<vd-resize @resize="handleResize">
  内容内容内容
</vd-resize>

import type { NodeRect } from '@vital-design/shared';

function handleResize(info: NodeRect) {
  console.log('尺寸变化：', info);
};

API

Props

参数	说明	类型	默认值
debounce	计算防抖时间	string | number	0
fixed	是否固定状态（撑满父元素）	boolean	false

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
resize	元素尺寸变化时触发	NodeRect

Slots

名称	说明
default	自定义内容