Resize 插件

Alpine 的 Resize 插件是 Resize Observer 的便利封装，允许你轻松地响应元素尺寸变化的事件。

这对于以下场景非常有用：自定义基于尺寸的动画、智能粘性定位、根据元素尺寸条件性地添加属性等。

安装

你可以通过 <script> 标签引入或通过 NPM 安装来使用此插件：

通过 CDN

你可以将此插件的 CDN 构建版本作为 <script> 标签引入，只需确保在 Alpine 核心 JS 文件之前引入。

<!-- Alpine 插件 -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/resize@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine 核心 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

通过 NPM

你可以从 NPM 安装 Resize 以在打包中使用：

npm install @alpinejs/resize

然后从你的打包工具中初始化它：

import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'

Alpine.plugin(resize)

...

x-resize

使用此插件的主要 API 是 x-resize。你可以将 x-resize 添加到 Alpine 组件中的任何元素，当该元素因任何原因调整大小时，提供的表达式将执行，并提供两个魔法属性：$width 和 $height。

例如，以下是一个使用 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>

Resize your browser window to see the width and height values change.

修饰符

.document

通常观察整个文档的尺寸比观察特定元素更有用。为此，你可以向 x-resize 添加 .document 修饰符：

<div x-resize.document="...">

Resize your browser window to see the document width and height values change.