spz-toast 提示

支持布局: nodisplay

何时使用

需要提供成功、警告和错误等反馈信息。
页面居中并自动消失，是一种不打断用户操作的轻量级提示方式。

代码演示

基本

最简单的用法，使用 showToast 方法来打开提示信息。

提示弹窗在点击屏幕非提示弹窗部分或提示打开后滚动距离大于提示弹窗的高度或者延时超过设置的时间会关闭。

<button @tap="toast.showToast(content='Hello，Lessjs!');">Display normal toast</button>
<spz-toast layout="nodisplay" hidden id="toast"></spz-toast>

修改延时

通过修改元素的 duration 属性来修改弹窗自动关闭的延时时间。

<button @tap="toast1.showToast(content='It will disappear in 3 seconds!');">Customized duration by attribute</button>
<spz-toast layout="nodisplay" hidden id="toast1" duration="3000"></spz-toast>

通过配置 showToast 方法的 duration 参数来修改弹窗自动关闭的延时时间。

<button @tap="toast2.showToast(content='It will disappear in 3 seconds!', duration=3000);">Customized duration by argument</button>
<spz-toast layout="nodisplay" hidden id="toast2"></spz-toast>

自定义内容位置

通过在元素内添加带有 role="content" 属性的子元素来控制内容在弹窗提示的位置。

<button @tap="toast3.showToast(content='Added successfully');">Customized place</button>
<spz-toast layout="nodisplay" hidden id="toast3" class="flex items-center justify-between w-auto">
  <span role="content"></span>
  <a href="#">View cart</a>
</spz-toast>

表单提示

在表单中，当提示元素带有 validation-for 和 visible-when-invalid 属性且当校验状态符合 visible-when-invalid 的值，提示弹窗会自动展示。

<form action-xhr="/api/customers/sign_in" custom-validation="show-first-on-submit">
  <label>
    Text:
    <input type="text" id="text" name="text" required minlength="6" maxlength="16" pattern="[\s\S]{6,16}">
  </label>
  <spz-toast validation-for="text" visible-when-invalid="valueMissing" layout="nodisplay">
    Text is required.
  </spz-toast>
  <spz-toast validation-for="text" visible-when-invalid="patternMismatch" layout="nodisplay">
    Text must be between 6-16 characters long.
  </spz-toast>
<form>

属性

属性名	说明	类型	默认值	是否必需
duration	自动关闭的延时，单位毫秒	number	6000	否
show	当弹窗打开时自动添加此属性	-	-	-

方法

showToast

打开提示弹窗。

参数	说明	类型	默认值	是否必需
content	提示文本	string	-	是
duration	自动关闭的延时，单位毫秒	number	-	否

AI 摘要（LLM Ready）

组件标识：spz-toast
用途一句话：展示操作反馈提示。
可识别属性条目：2
可识别方法小节：1
可识别事件小节：0
关键属性名（Top）：duration、show
关键方法名（Top）：showToast
关键事件名（Top）：无（待补充）
阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
关联文档：/guide/actions-and-events/ 、/guide/layouts/

spz-toast 提示#

#何时使用

#代码演示

#基本

#修改延时

#自定义内容位置

#表单提示

#属性

#方法

#showToast

#AI 摘要（LLM Ready）