sweetalert2 相关问题

一个响应式,可自定义,可访问(WAI-ARIA)替代JavaScript的弹出框,具有零依赖性。将此标记用于涉及使用此库的问题。

Laravel vue 惯性在表单成功时显示 sweetalert 消息

所以我将此组件包含在我的主布局文件中,它看起来像这样: 从“@inertiajs/vue3”导入{usePage}; 从“vue”导入{计算}; 常量...</desc> <question vote="0"> <p>所以我将此组件包含在我的主布局文件中,它看起来像这样:</p> <pre><code>&lt;script setup&gt; import {usePage} from &#34;@inertiajs/vue3&#34;; import {computed} from &#34;vue&#34;; const page = usePage() const message = computed(() =&gt; page.props.flash.message) if (message) { Swal.fire({ text: &#39;Success!&#39;, icon: &#39;success&#39;, toast: true, showConfirmButton: false, position: &#39;bottom&#39;, timer: 3500 }); } &lt;/script&gt; </code></pre> <p>以上是我一直在玩的东西。现在,它甚至在提交任何表单之前都会立即显示闪存消息。我只想在成功提交表单时显示它。我认为最好的办法是在成功提交表单后仅包含该组件一次。但由于该消息总是立即显示,所以到目前为止我一直在尝试上述操作但没有成功。</p> <p>我从我的控制器重定向回来,并显示一条闪现消息,如下所示:</p> <pre><code>return redirect()-&gt;route(&#39;user.dashboard&#39;)-&gt;withMessage(&#39;It works&#39;); </code></pre> <p>在我的 HandleInertiaRequests 中间件中我添加了:</p> <pre><code>return array_merge(parent::share($request), [ &#39;flash&#39; =&gt; [ &#39;message&#39; =&gt; session(&#39;message&#39;) ] ]); </code></pre> <p>我知道我可以像这样在 div 中显示消息,并且这是有效的:</p> <pre><code>&lt;div v-if=&#34;$page.props.flash.message&#34;&gt;{{ $page.props.flash.message }}&lt;/div&gt; </code></pre> <p>但这不是我想要的,我想显示 sweetalert 消息,并且只显示一次。</p> </question> <answer tick="false" vote="0"> <p>如果我理解正确的话,你想显示一次警报。此代码仅在安装组件时才会弹出 SweetAlert。</p> <pre><code>&lt;script setup&gt; import { usePage } from &#34;@inertiajs/vue3&#34;; import { onMounted, computed } from &#34;vue&#34;; const page = usePage(); const message = computed(() =&gt; page.props.flash.message); onMounted(() =&gt; { if (message.value) { Swal.fire({ text: message.value, icon: &#39;success&#39;, toast: true, showConfirmButton: false, position: &#39;bottom&#39;, timer: 3500 }); } }); &lt;/script&gt; </code></pre> <p>但是,您应该在显示 SweetAlert 后清除闪现消息。</p> </answer> </body></html>

回答 0 投票 0

Sweetalert 在 Google 跟踪代码管理器中工作吗?

我一直在将代码从 Sweetalert 复制并粘贴到 Google 跟踪代码管理器中。它不会出现在预览中,并且在提交到网站后也不会出现。 Sweetlart 在 Google 跟踪代码管理器中工作吗...

回答 2 投票 0

如何加载额外的loader?

我正在将我的 Angular 应用程序从 Angular 7 升级到 Angular 15。使用 SweetAlert,出现以下错误。 ./node_modules/sweetalert2/src/sweetalert2.scss?ngGlobalStyle:1:0 - 错误:模块解析失败...

回答 1 投票 0

sweetalert 不在 vue3 的异步方法中等待

我正在尝试将 SweetAlert2 与 Vue3(组合 API)一起使用。使用以下代码,警报不会等待单击其按钮: onBeforeMount(async() => { Swal.fire('测试消息');

回答 1 投票 0

SweetAlert2 不显示

我正在尝试在网络应用程序中实现SweetAlert2,在检查论坛和网站后,我没有在代码中看到任何错误,但无法看到消息 我正在测试的页面

回答 1 投票 0

在 React 中使用 SweetAlert 2 的组件作为 html

如何在带有 SweetAlert2 的 ReactJs 中使用组件作为 html 主体?我在点击事件上调用 swal 。 斯瓦尔({ 标题:“标题”, html: }); 我无法使用

回答 1 投票 0

sweetalert 2 中的输入不可输入或无法在materializecss 模式中输入

我有一个模式,当我点击添加账单按钮时,它会弹出sweetalert2,下面提供的代码来自他们的文档,所以我认为代码没有问题,无论如何,我的

回答 6 投票 0

SweetAlert2 - 当我将输入值保存到文本字段中时,它返回 [object Object]

我正在尝试在表单加载时制作弹出窗口。 当您在弹出窗口中输入 ID 号时,它会存储在表单的文本字段中。 在此输入图像描述 - 这是您放置 t...

回答 1 投票 0

用图像更改图标sweetalert

我想问如何用图像更改sweetalert中的图标图像? 我尝试使用资产中的图像更改 Swal.fire 中的图标图像,但它不起作用 这是脚本 Swal.火({ 图标:&q...

回答 1 投票 0

sweetalert 2 中的输入无法在材料 UI 模式反应 js 中输入

我有一张卡来显示订单,卡内取消时会打开 sweetalert2 弹出窗口,询问取消原因。这在订单屏幕上运行得很好。 我有一张卡来显示订单,卡内取消时会打开 sweetalert2 弹出窗口,询问取消原因。这在订单屏幕上运行得很好。 <Grid item md={8} sm={12}> orders.map((order) => <SupplierOrderBlock data={order} />) </Grid> 取消后,这些大火。第一个要求用户输入原因,如果用户没有输入原因,第二个甜蜜警告会提示用户输入原因才能取消。 const cancelOrder = (orderID, status) => { Swal.fire({ title: "Are You Sure You Want to Cancel Order", text: "Please Enter the reason for the cancellation of order", input: "text", showCancelButton: true, confirmButtonColor: "#1c8fec", cancelButtonColor: "#fa013b", customClass: 'swal-wide' }).then((result) => { if (result.value == '') { swal({ title: "You can not cancel without giving a reason", showCancelButton: true, confirmButtonColor: "#1c8fec", cancelButtonColor: "#fa013b", buttons: { Confirm: { text: "Okay", className: "okayButton" }, }, }); } else if (result.isConfirmed) { //cancel order} 这工作得很好。 现在,当我尝试在 Material UI 模式中的仪表板上使用相同的组件时,它不允许我输入文本。 <Modal open={modal} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" style={{ width: "60%", zIndex: 1, marginLeft: '-10%' }} > <Box style={{ marginLeft: "50%", marginTop: "25vh", width: "100%", position: 'absolute' }}> <SupplierOrderBlock data={supplierorder} /> </Box> </Modal> 如果我从模态中删除 Z-index 属性,则 swal 会位于模态后面 但是关闭模式后它可以让我们输入原因 从 mui 抽屉打开 sweet Alert2 时我也遇到了同样的问题 并能够使用disableEnforceFocus修复它 标记到我的 mui 抽屉 禁用EnforceFocus >

回答 1 投票 0

nuxt3项目添加sweet alert 2

我正在努力将甜蜜警报 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用 vue-sweetalert2 但我在某些时候它定义了全局变量。 // 在安装函数中 vue.原型.$

回答 3 投票 0

asyncSettings.successMessage 进入 Sweet Alert

我怎样才能把这个成功信息变成甜蜜的警报? asyncSettings.successMessage 可以只包含字符串而不包含函数吗? 模态形式(这个,{ formURL: "/invite-user/"+...

回答 0 投票 0

使用 sweetalert2 草拟登录表单,但它只重定向到管理页面而不是 hello 页面

我正在测试 sweetalert2,其中我的登录表单将使用它的设计。但是,当我从我的数据库中输入没有“管理员”名称的用户名和密码时,它仍然会重定向到管理页面。 我试...

回答 0 投票 0

甜蜜警报停止,除非我按下确认按钮

我有一个很大的验证 javascript 规则 - 在我应该允许提交表单之前列出.. 为了保持示例简单,我只展示了前 4 个规则语法简化... $("#SubmitForm")....

回答 1 投票 0

Sweet Alert 消息问题,它没有出现在表单提交

成功提交表单数据后,我试图使用甜蜜警报功能显示弹出消息。我的数据正在插入到数据库中,但在成功插入消息后,包括...

回答 0 投票 0

React- 渲染一个只发出 Swal 警报的组件

我正在尝试呈现一个发出 Swal 警报的组件,仅此而已 - 它不应返回任何 HTML。 导出默认函数 AddPaymentNotification() { 使用效果(()=> { Swal.fire({ 标题:'

回答 0 投票 0

如何解决此警告:SweetAlert2:未知参数“onOpen”?

我的甜蜜警报显示此警告,我该如何解决?任何想法 当我触发这个 Sweet Alert 时不知道是什么原因导致这个警告,它显示了这个警告。

回答 0 投票 0

提交后的甜蜜警报消息不起作用

我正在尝试在数据库中插入记录后显示警报消息,正常的 js 警报工作正常并显示消息。 回声''; echo 'alert(" 你的 re...</desc> <question vote="0"> <p>我正在尝试在数据库中插入记录后显示一条警报消息,正常的 js 警报工作正常并显示消息。</p> <pre><code>echo &#39;&lt;script&gt;&#39;; echo &#39;alert(&#34; Your request has been successfully filled and your Letter No is\n&#39;.$Dep.&#39;/&#39;.$fy.&#39;/ &#34;+&#34;&#39;.$id.&#39;.\nKindly submit the original copy of this letter to CRDS.&#34;)&#39;; echo &#39;&lt;/script&gt;&#39;; echo &#34;&lt;script&gt;window.location.href=&#39;dashboard.php&#39;&lt;/script&gt;&#34;; exit; </code></pre> <p>但是当我使用 sweet alert 函数而不是普通的 js 函数时,它不显示任何消息。它直接将我带到标题。我用 sweet alert2 尝试过但没有快乐。虽然插入了数据但未显示消息我的代码有什么问题我的代码中包含了甜蜜的警报库。我的代码是</p> <pre><code>echo &#39;&lt;script&gt;&#39;; echo &#39;swal(&#34; Your request has been successfully filled and your Letter No is\n&#39;.$Dep.&#39;/&#39;.$fy.&#39;/ &#34;+&#34;&#39;.$id.&#39;.\nKindly submit the original copy of this letter to CRDS.&#34;)&#39;; echo &#39;&lt;/script&gt;&#39;; echo &#34;&lt;script&gt;window.location.href=&#39;dashboard.php&#39;&lt;/script&gt;&#34;; exit; </code></pre> </question> </body></html>

回答 0 投票 0

甜蜜提醒功能不显示消息

在记录插入数据库后,我试图显示一条警报消息,正常的 js 警报工作正常,代码是 回声''; echo 'alert(" 你的请求有 </desc> <question vote="3"> <p>我试图在记录插入数据库后显示一条警报消息,正常的 js 警报工作正常,代码是</p> <pre><code>echo &#39;&lt;script&gt;&#39;; echo &#39;alert(&#34; Your request has been successfully filled and your Letter No is\n&#39;.$Dep.&#39;/&#39;.$fy.&#39;/ &#34;+&#34;&#39;.$id.&#39;.\nKindly submit the original copy of this letter to CRDS.&#34;)&#39;; echo &#39;&lt;/script&gt;&#39;; echo &#34;&lt;script&gt;window.location.href=&#39;dashboard.php&#39;&lt;/script&gt;&#34;; exit; </code></pre> <p>但是当我使用 sweet alert 函数而不是普通的 js 函数时,它不显示任何消息。我的代码有什么问题>我在我的代码中包含了 sweet alert 库。我的代码是</p> <pre><code>echo &#39;&lt;script&gt;&#39;; echo &#39;swal(&#34; Your request has been successfully filled and your Letter No is\n&#39;.$Dep.&#39;/&#39;.$fy.&#39;/ &#34;+&#34;&#39;.$id.&#39;.\nKindly submit the original copy of this letter to CRDS.&#34;)&#39;; echo &#39;&lt;/script&gt;&#39;; echo &#34;&lt;script&gt;window.location.href=&#39;dashboard.php&#39;&lt;/script&gt;&#34;; exit; </code></pre> </question> <answer tick="false" vote="0"> <p>swal 函数很可能是错误的,查看 swal 文档,这里有一个如何使用它的例子,也许你错过了火。</p> <pre><code>Swal.fire( &#39;Good job!&#39;, &#39;You clicked the button!&#39;, &#39;success&#39; ) </code></pre> <p>在警报的那一边,但是如果我们更深入地看这个主题,在最后一行中您正在使用 window.location.href 更改 url,那么最好以不同的方式评论或实现它,因为那里您正在将其重定向到另一个页面,并且不会显示警报。</p> </answer> <answer tick="false" vote="0"> <p>使用 SweetAlert 你可以简单地使用:</p> <p><pre><code>echo &#39;swal(&#34;Some&#39;.$variable.&#39;text!&#34;, &#34;You clicked the button!&#34;, &#34;success&#34;)&#39;;</code></pre></p> <p>但是在<pre><code>SweetAlert2</code></pre>你可以简单地使用:</p> <pre><code>echo ;Swal.fire( &#39;Some&#39;.$variable.&#39;text!&#39;, &#39;You clicked the button!&#39;, &#39;success&#39; )&#39;; You can try this one `echo &#34;&lt;script&gt; Swal.fire({ title: &#39;Successfully save!&#39;, html: `Your request has been successfully filled and your Letter No is\n ${$Dep}/${$fy}/${$id}\nKindly submit the original copy of this letter to CRDS..`, timer: 2000, timerProgressBar: true, }).then((result) =&gt; { window.location.href=&#39;dashboard.php&#39; }) &lt;/script&gt;&#34; ` </code></pre> </answer> <answer tick="false" vote="0"> <p>在你的标题中,</p> <p><strong>添加,</strong></p> <pre><code>&lt;head&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;jquery-3.3.1.min.js&#34;&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p><strong>那么,</strong></p> <pre><code>echo &#34;&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function(){ Swal.fire({ title: &#39;Successfully save!&#39;, html: `Your request has been successfully filled and your Letter No is\n ${$Dep}/${$fy}/${$id}\nKindly submit the original copy of this letter to CRDS..`, timer: 1500, timerProgressBar: true, }).then((result) =&gt; { window.location.href=&#39;dashboard.php&#39; })}); &lt;/script&gt;&#34; </code></pre> </answer> </body></html>

回答 0 投票 0

如果输入字段为空并且用户尝试继续,如何使用 sweetalert2 抛出错误

我想使用甜蜜警报作为弹出窗口,但我想确保用户在输入字段中输入一个字符串,如果这样的用户由于将其留空而无法输入某些内容,并尝试继续,...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.