docs_vue2/one/docs/directives/v-resize.md

v-resize

简介

v-resize 指令用于检测元素是否发生了尺寸变化。

示例

API

:::tip 指令的具体用法请参考官方文档。更多详细参数请参考自定义指令。 :::

绑定值

类型：function | Object。

使用 function 类型则绑定值表示 resize 时触发的回调函数。例如：

<div v-resize="handler"></div>

使用 Object 类型时绑定值可完整配置所有参数。例如：

<div v-resize="{
  wait: 100,
  mode: 'debounce',
  handler: cb,
  leading: true
}"></div>

参数	类型	默认值	描述
wait	number	150	传递给 mode 函数的毫秒数。
mode	string	-	[^mode]
handler	function	-	resize 时触发的回调函数。
leading	boolean	false	防抖、节流模式是否在 resize 最初就将执行一次。

:::warning Object 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。 :::

^^^mode 执行模式，默认为最细粒度。

+++枚举值

值	描述
debounce	防抖模式。
throttle	节流模式。
+++
^^^

修饰符

对应 Object 类型绑定值中的 mode / leading / wait。leading 可以与 debounce / throttle 其中之一同时使用。例如：

<div v-resize.throttle.leading.500="handler"></div>

值	描述
debounce	使用防抖模式，不能与 throttle 一同使用。
throttle	使用节流模式，不能与 debounce 一同使用。
leading	使用后，防抖、节流模式在第一次触发 resize 时就将执行一次。
wait	传递给 mode 函数的毫秒数，注意这里 wait 是一个变量。

:::warning 在修饰符中的唯一正整数将被识别为 wait。 :::