Alpine.js 的一个调整大小插件

Alpine.js 的创建者 Caleb Porzio 刚刚发布了一个 resize 插件，它允许你轻松地对元素大小改变做出反应。此插件是对 Resize Observer API 的包装，在我看来，令人印象深刻的是，这个插件从 想法 到 发布 只用了不到一个小时！

[调整大小插件] 适用于：自定义基于大小的动画、智能粘性定位、根据元素大小有条件地添加属性等。

以下是用 x-resize 属性处理大小更改的示例

<div
    x-data="{ width: 0, height: 0 }"
    x-resize="width = $width; height = $height"
>
    <p x-text="'Width: ' + width + 'px'"></p>
    <p x-text="'Height: ' + height + 'px'"></p>
</div>

如果你想知道整个文档的宽度和高度而不是特定元素的宽度和高度，你可以使用 .document 修饰符

<div
    x-data="{ width: 0, height: 0 }"
    x-resize="width = $width; height = $height"
>...</div>

请注意，高度是指滚动高度，而不是视窗的高度。当改变窗口大小并将内容推到更小的屏幕上时，你会看到更大的高度。

你可以在 Alpine.js 的 文档 中了解更多关于这个插件的信息！