@felte/reporter-tippy (英语)
使用 Felte 的记者 Tippy.js (英语) 以显示错误消息.
[尖叫声] Tipy.js在过去几年里没有被维持(而"浮井"似乎是它的取而代之) 因此,我不再建议使用这一一揽子办法,而应视为贬值.
安装
npm install --save @felte/reporter-tippy tippy.js
# Or, if you use yarn
yarn add @felte/reporter-tippy tippy.js
使用量
默认导出是返回报告者的函数 。 把它加进 extend 费尔特的财产 createForm 配置对象.
import reporter from '@felte/reporter-tippy';
const { form } = createForm({
// ...
extend: reporter(),
// ...
});
你也许也想把Tippy的风格加进你的回放
import 'tippy.js/dist/tippy.css';
选项
您可以在给记者打电话时将选项传递给 Tipby :
reporter({
tippyProps: {
/* tippy options */
},
});
也可以通过一个 setContent 函数将接收当前验证消息和字段路径。 您可以在此修改您的验证信件, 如果您想在 Tipy 内显示 HTML 内容, 这些信息将会有用 。 这个 messages 参数或是一个字符串的数组(根据您的验证策略,它可能不止一个消息)或未定义。 这个 path 参数将是一个字符串,带有您字段的全部路径(例如. email, (中文(简体) ), account.email(见e/cn.4/sub.2/2002/l.48等).
reporter({
setContent: (messages, path) => {
return messages?.map((message) => `<p>${message}</p>`);
},
tippyProps: {
allowHTML: true,
},
});
您也可以使用 tippyPropsMap 属性。 它期望一个与您数据形状相同的物体:
reporter({
tippyPropsMap: {
account: {
email: {
allowHTML: true,
/* other tippy props */
},
},
},
});
警告
这个记者也可以显示您的警告信息 。 为了这样做,你需要通过财产 level 给您的记者的值为 warning。 。 。 .
reporter({
level: 'warning',
});
为了避免你的UI出错,建议使用Tippy报告错误 或 警告,不是两者皆有.
选择退出
如果这个套件不能满足您对所有情况的需求, 请知道我们正在努力改进, 但是您最好选择不报告一个特定字段的错误, 添加 data-felte-reporter-tippy-ignore 作为您输入的属性.
<input name="email" data-felte-reporter-tippy-ignore />
自定义控制
如果您使用非 Felte 管理的自定义控制, 您仍然可以使用 @felte/reporter-tippy。您可以为此使用两个数据属性:
data-felte-reporter-tippy-for: 告诉此包使用带有此属性的元素作为指定字段的控制.data-felte-reporter-tippy-trigger-for: 告诉此包使用带有此属性的元素作为触发器,以显示指定字段的 Tippy .
自定义控件将永远成为tipy的触发器,第二个参数是有用的,如果你想用标签等其它元素来触发Tipy来模仿这个包的默认行为.
<span id="email-label" data-felte-reporter-tippy-trigger-for="email"
>Email:</span
>
<div
contenteditable
data-felte-reporter-tippy-for="email"
aria-labelledby="email-label"
tabindex="0"
/>
自定义定位
如果您需要显示您的Tippy的位置不同,您可以使用 data-felte-reporter-tippy-position-for 属性。 如果使用自定义控制,在幕后使用有效的 HTML 输入但隐藏它,这将是有益的:
<!-- Tippy will be shown on top of this div -->
<div data-felte-reporter-tippy-position-for="email" />
<!-- Not on top of this input -->
<input name="email" type="email" />