Flash 消息是一种便捷的方式,用于告知用户请求的结果,无论是成功还是失败。只需使用 Flash 门面,在请求完成后显示一条消息即可。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 %}要仅显示某个特定的闪存消息类型, 您可以将该值传递给属性 — 成功, 错误, 信息, 警告 或 验证。 多个值用逗号分隔。
<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。在页面头部添加 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
});