Alpine.js 的 Resize 插件

Caleb Porzio，Alpine.js 的创建者，刚刚发布了一个 Resize 插件，允许你在元素发生变化时轻松做出反应。这个插件是 Resize Observer API 的包装器，在我看来，令人印象深刻的部分是这个插件是如何在一个多小时内从创意到发布的！

[该 resize 插件]可用于: 自定义基于 size 的动画、智能粘性定位、根据元素大小有条件地添加属性等。

以下是使用 x-resize 属性处理 size 变化的示例

<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 的宽度和高度，而不是特定元素，你可以使用 .document 修饰符：

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

请注意，高度是滚动高度，而不是视口的高度。当你改变窗口的大小时，你会看到一个更大的高度，内容会在较小的屏幕上向下推。

你可以在 Alpine.js 文档中了解更多该插件信息。