新的 Alpine.js 插件:Intersect、Persist 和 Trap
发布于 作者 Jason Beggs
自 Alpine.js v3 发布以来,Caleb Porzio(Alpine 的创建者)发布了三个新的第一方插件。这些新插件分别针对 JavaScript 中令人困惑或维护起来很麻烦的某些方面,并通过在 HTML 中添加几个自定义属性来简化实现过程。
Intersect
该 Intersect 插件 为 Intersection Observer 提供了一个不错的包装器。该插件使实现无限滚动和懒加载图像等 UI 模式变得更加容易和直观。另一个很好的用例是在营销页面上,当用户滚动到某个部分时,将元素动画到屏幕上。
要使用该插件,请按照 安装说明 进行操作,然后将 x-intersect
属性添加到一个元素上,该元素的回调应该在该元素“与用户的视窗相交”时运行。
<div x-data="{ shown: false }" x-intersect="shown = true"> <div x-show="shown" x-transition> I'm in the viewport! </div></div>
如果您希望回调仅在元素进入或离开用户的视窗时运行,您也可以使用 x-intersect:enter="callback"
或 x-intersect:leave="callback"
。
此外,该插件还支持 .once
修饰符,该修饰符可用于表示回调应仅在元素首次与用户的视窗相交时运行。
<div x-intersect.once="shown = true">...</div>
Persist
该 Persist 插件 为将您的 Alpine 数据集与 localStorage 集成提供了一种新的神奇方法。
要使用该插件,请按照 安装说明 进行操作,然后将您的初始数据值包装在 $persist()
中。Alpine 就会知道将这些值(以及对这些值的任何更新)“持久化”到 localStorage。在后续页面加载中,Alpine 就会从 localStorage 中重新提取这些值,而不是使用默认值进行初始化。
<div x-data="{ count: $persist(0) }"> <button x-on:click="count++">Increment</button> <span x-text="count"></span></div>
Trap
该 Trap 插件 提供了一种简单的方法来“捕获”模态框和对话框等元素内部的焦点。捕获焦点对于使用屏幕阅读器或通过键盘进行导航的用户来说非常有用。
要使用该插件,请按照 安装说明 进行操作,然后将 x-trap
属性添加到您的模态框/对话框元素中。只要传递给 x-trap
的表达式计算结果为 true
,该插件就会捕获元素内部的焦点。
<div x-data="{ open: false}"> <button @click="open = true">Open Dialogue</button> <span x-show="open" x-trap="open"> <p>...</p> <input type="text" placeholder="Some input..."> <input type="text" placeholder="Some other input..."> <button @click="open = false">Close Dialogue</button> </span></div>
该插件的一个非常好的方面是它可以递归工作。这意味着如果您有嵌套的对话框元素,Alpine 就会捕获每个元素内部的焦点,然后在关闭时将焦点返回到之前的元素。如果没有该插件,这在您自己的代码中将非常繁琐。
结论
这些新插件对框架来说确实是很棒的补充。它们的功能范围非常集中,您只需要在需要它们的项目中安装它们即可。
您是否有关于新插件的绝妙想法,或者您是否已经构建了 Alpine 插件?我很想在 Twitter 上听听您的想法 (@jasonlbeggs)!
TALL 技术栈(Tailwind CSS、Alpine.js、Laravel 和 Livewire)顾问,designtotailwind.com 的所有者。