新的 Alpine.js 插件:Intersect、Persist 和 Trap

发布于 作者

New Alpine.js Plugins: Intersect, Persist, and Trap image

自 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)!

Jason Beggs photo

TALL 技术栈(Tailwind CSS、Alpine.js、Laravel 和 Livewire)顾问,designtotailwind.com 的所有者。

归档于
Cube

Laravel 新闻稿

加入 40,000 多名其他开发人员,绝不错过新的技巧、教程等等。

Laravel Forge logo

Laravel Forge

轻松创建和管理您的服务器,并在几秒钟内部署您的 Laravel 应用程序。

Laravel Forge
Tinkerwell logo

Tinkerwell

Laravel 开发人员必备的代码运行器。使用 AI、自动补全和对本地和生产环境的即时反馈进行修补。

Tinkerwell
No Compromises logo

No Compromises

No Compromises 播客的两名经验丰富的开发人员 Joel 和 Aaron 现在可以为您的 Laravel 项目提供服务。 ⬧ 固定费率为每月 7500 美元。 ⬧ 没有冗长的销售流程。 ⬧ 没有合同。 ⬧ 100% 退款保证。

No Compromises
Kirschbaum logo

Kirschbaum

提供创新和稳定性,确保您的 Web 应用程序取得成功。

Kirschbaum
Shift logo

Shift

运行旧版本的 Laravel?即时、自动化的 Laravel 升级和代码现代化,使您的应用程序保持新鲜。

Shift
Bacancy logo

Bacancy

只需每月 2500 美元,即可为您的项目配备一名经验丰富的 Laravel 开发人员,拥有 4-6 年的经验。获得 160 小时的专业技能和 15 天的免费试用。立即预约通话!

Bacancy
Lucky Media logo

Lucky Media

现在就获取幸运 - Laravel 开发的理想选择,拥有十多年的经验!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar:Laravel 电子商务

Laravel 的电子商务。一个开源包,将现代无头电子商务功能的力量带到 Laravel 中。

Lunar:Laravel 电子商务
LaraJobs logo

LaraJobs

官方 Laravel 职位网站

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit:Laravel SaaS 启动套件

SaaSykit 是一个 Laravel SaaS 启动套件,包含运行现代 SaaS 所需的所有功能。支付、漂亮的结账、管理面板、用户仪表板、身份验证、现成的组件、统计信息、博客、文档等等。

SaaSykit:Laravel SaaS 启动套件
Rector logo

Rector

您无缝升级 Laravel、降低成本和加速创新的合作伙伴,帮助您取得成功。

Rector
MongoDB logo

MongoDB

使用 MongoDB 和 Laravel 的强大集成增强您的 PHP 应用程序,使开发人员能够轻松高效地构建应用程序。支持事务、搜索、分析和移动用例,同时使用熟悉的 Eloquent API。了解 MongoDB 的灵活、现代数据库如何改变您的 Laravel 应用程序。

MongoDB
Maska is a Simple Zero-dependency Input Mask Library image

Maska 是一个简单的零依赖输入掩码库

阅读文章
Add Swagger UI to Your Laravel Application image

在您的 Laravel 应用程序中添加 Swagger UI

阅读文章
Assert the Exact JSON Structure of a Response in Laravel 11.19 image

在 Laravel 11.19 中断言响应的精确 JSON 结构

阅读文章
Build SSH Apps with PHP and Laravel Prompts image

使用 PHP 和 Laravel Prompts 构建 SSH 应用程序

阅读文章
Building fast, fuzzy site search with Laravel and Typesense image

使用 Laravel 和 Typesense 构建快速、模糊的网站搜索

阅读文章
Add Comments to your Laravel Application with the Commenter Package image

使用 Commenter 包在您的 Laravel 应用程序中添加评论

阅读文章