Loading... <!-- wp:heading --> <h2 id="前言">前言</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>前两天我在写一个前端项目是发现的这个框架，使用了一下发现很好用。<strong>SweetAlert</strong> 是非常漂亮的 JavaScript 警报功能的替代品。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>他的官方介绍是：SweetAlert 让弹窗更容易、更美观。</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 id="使用介绍">使用介绍</h2> <!-- /wp:heading --> <!-- wp:heading {"level":3} --> <h3 id="下载安装">下载安装</h3> <!-- /wp:heading --> <!-- wp:list --> <ul><li>通过bower安装：</li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p><code>bower install sweetalert</code></p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><li>通过npm安装</li></ul> <!-- /wp:list --> <!-- wp:preformatted --> <pre class="wp-block-preformatted"><code>npm install sweetalert --save</code></pre> <!-- /wp:preformatted --> <!-- wp:preformatted --> <pre class="wp-block-preformatted"><code>import swal from 'sweetalert';</code></pre> <!-- /wp:preformatted --> <!-- wp:list --> <ul><li>src标签引入</li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>注意：SweetAlert需要等到所有DOM元素加载完毕后才可使用</p> <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 id="使用">使用</h3> <!-- /wp:heading --> <!-- wp:list --> <ul><li>弹出一个alert的写法</li></ul> <!-- /wp:list --> <!-- wp:code --> <pre class="wp-block-code"><code> <script> swal({ title: "你好", text: 'www.xxhzm.cn', icon: 'success' }) </script></code></pre> <!-- /wp:code --> <!-- wp:paragraph --> <p> 第一个参数是标题，第二个参数是内容，第三个参数是提醒类型（success,error,warning）</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>还可以自定义button按钮内容</p> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code> <script> swal({ title: "你好", text: 'www.xxhzm.cn', icon: 'success', button: "OK！", }) </script></code></pre> <!-- /wp:code --> <!-- wp:list --> <ul><li>使用Promise</li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p>SweetAlert 使用Promise来跟踪用户如何与警报交互。</p> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code> <script> swal("请点击按钮或者点击外部内容") .then((value) => { swal(`${value}`); }); </script></code></pre> <!-- /wp:code --> <!-- wp:paragraph --> <p>用户如果点击确定按钮，则会返回true，如果点击外部内容则返回null</p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><li>自定义按钮</li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p>SweetAlert 可以自定义button内容，同时也可以将button设置为一个数组</p> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code> swal("确定吗", { buttons: ["Yes!", "No!"], });</code></pre> <!-- /wp:code --> <!-- wp:paragraph --> <p>也可以使用buttons: false,来取消显示按钮</p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><li>自定义内容</li></ul> <!-- /wp:list --> <!-- wp:code --> <pre class="wp-block-code"><code> swal("请输入内容", { content: "input", }) .then((value) => { swal(`你输入了: ${value}`); });</code></pre> <!-- /wp:code --> <!-- wp:code --> <pre class="wp-block-code"><code> swal({ content: { element: "input", attributes: { placeholder: "请输入你的密码", type: "password", }, }, });</code></pre> <!-- /wp:code --> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>SweetAlert搭配axios食用更佳</p> <!-- /wp:paragraph --> 猜你想看 Golang 中 printf 占位符详解 每日一学：PHP 中的array_replace_recursive函数详解 详解http和https的作用与区别 Go基本数据类型 常用Excel函数 PHP学习以及安装 宝塔7.8版本降级7.7+插件 开学啦 Vue组件-2 解决 Vue 打包过后 dist 文件夹过大 最后修改：2022 年 06 月 05 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
