Flash 消息是一种便捷的方式,用于告知用户请求的结果,无论是成功还是失败。只需使用 Flash Facade,在请求完成后显示一条消息。Flash 消息通常设置在 AJAX 处理器中、组件逻辑中,或页面或布局的 PHP 部分中。
function onSave()
{
// Sets a successful message
Flash::success('Settings successfully saved!');
// Sets an error message
Flash::error('Something went wrong...');
// Sets a warning message
Flash::warning('Please confirm your email address soon');
// Sets an informative message
Flash::info('The export is still processing. Please try again in a minute.');
}闪现消息会在3秒后消失。点击闪现消息会阻止其消失。
AJAX 框架内置支持闪回消息,只需在表单上指定 data-request-flash 属性即可启用在已完成的 AJAX 请求上使用闪回消息。
<form
data-request="onSuccess"
data-request-flash>
<!-- ... -->
</form>为确保当浏览器重定向时闪回消息也能显示,你应该渲染一个内联闪回消息当页面加载时通过将此代码放置在你的页面或布局中。
{% flash %}
<p
data-control="flash-message"
data-type="{{ type }}"
data-interval="5">
{{ message }}
</p>
{% endflash %}若要仅显示特定类型的瞬时消息,您可以将值传递给属性 — success, error, info, warning 或 validate。多个值之间用逗号分隔。
<form data-request-flash="success,warning"></form>当使用 验证功能 结合 data-request-flash 属性时,验证错误会优先显示并抑制闪存消息。要同时显示两者,请在属性中包含 validate 类型。
<form
data-request-validate
data-request-flash="success,error,validate">此 data-request-message 属性可用于在请求运行时显示一个即时进度消息。这对于长时间运行的进程特别有用。
<button
data-request="onSubmit"
data-request-message="Please wait while we process your request...">
Submit
</button>要更改闪现消息的外观,请定位 .oc-flash-message CSS 类。
.oc-flash-message.success {
background: green;
}
.oc-flash-message.error {
background: red;
}
.oc-flash-message.warning {
background: orange;
}
.oc-flash-message.info {
background: aqua;
}
.oc-flash-message.loading {
background: aqua;
}请参阅 Flash Twig 标签文章 以了解有关
{% flash %}标签的更多信息。
要显示内联闪现消息或完全更改默认的闪现消息标记,请在您的主题中创建一个包含自定义内容的新局部视图。例如,创建一个新的局部视图 命名为 flash-messages.htm 并 粘贴以下内容。
{% flash %}
<div class="alert alert-{{ type }}">
{{ message }}
</div>
{% endflash %}接下来,将局部视图包含在您的表单中作为一个自更新局部视图,使用 {% ajaxPartial %} 标签。在 data-request-update 中引用局部视图名称将自动更新此局部视图并禁用内置的闪现消息。
<form>
{% ajaxPartial 'flash-messages' %}
<label>Title</label>
<input name="title" />
<button
data-request="onSave"
data-request-update="{ flash-messages: true }">
Save
</button>
</form>另外, 您可以将局部模板包含在布局中, 并全局更新它, 而不是添加 data-request-flash 每个元素。 在页面的 head 部分添加 ajax-request-update meta 标签, 并将 content 属性设置为 全局更新局部模板。
<head>
<meta name="ajax-request-update" content="{ flash-messages: true }" />
</head>
<body>
<!-- Updates with every AJAX request -->
{% ajaxPartial 'flash-messages' %}
</body>使用 oc.flashMsg 函数通过 JavaScript 显示闪烁消息。可以指定类型为 success、error 或 warning。可以指定一个可选的 interval 来控制闪烁消息显示的时长以秒为单位。
oc.flashMsg({
message: 'Record has been successfully saved. This message will disappear in 1 second.',
type: 'success',
interval: 1
});