blogged 522

source/_posts/sweetalert.md

+---
+title: 谁不想让自己的网站装载上Sweetalert呢？
+categories:
+ - 网站
+tags:
+ - 网站
+ - 科技
+ - Web前端
+date: 2021/5/22 20:23:20
+permalink: /2021/05/22/sweetalert/
+---
+
+说真的，谁不厌倦JavaScript自带的默认弹窗？谁不想让自己的网站装载上Sweetalert呢？
+<!-- more -->
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/cao-zhiming/ss-caozhimingtk/js/sweetalert.js"></script>
+
+## 对于默认弹窗的厌烦
+
+~~在互联网上混迹多年的~~你，可能会看到一些这样的弹窗：
+
+<img src="https://ss.caozhiming.tk//img//js-alert.png"></p>
+
+那个啥，这个效果是我用**本地JavaScript代码**搞出来的，可不是人家白宫官网自带的。~~我的网站还没有著名到让美国政府都知晓的程度。~~
+
+不知道是不是写了太多这种弹窗，总感觉……好难看啊！！
+
+<li>标题为“XXX网站显示”</li><li>没有标题上方图标</li><li>这个弹窗虽小，但是一旦弹出，只能按那个按钮才能继续，其它地方都点不了</li><li>功能太少了</li><br>
+
+总之，我**极其讨厌默认的这个弹窗**！！！
+
+## 开始Sweetalert
+
+> 批判不仅要对事物提出自己的看法，有敢于提出自己的观点的勇气，也要有一定的建设性，而不能一味地否定。
+> 整理自《义务教育教科书 道法 七年级下册（2016）》
+
+好吧好吧，我不能只是批判默认弹窗，还得提出更好的，对吧？就如标题中所说，本次的主角是——Sweetalert。
+
+<button onclick="swal('我是Sweetalert','没错，就是我','success');">点我，让Sweetalert出场</button>
+
+那个东西就是Sweetalert~~（这不是废话吗）~~。针对那个功能，代码如下：
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/cao-zhiming/ss-caozhimingtk/js/sweetalert.js"></script> //先安装Sweetalert到该页面
+
+<script type="text/javascript">
+swal("我是Sweetalert","没错，就是我","success");
+</script> //主程序
+```
+<p class="note note-warning">值得注意的是，<strong>这两行代码的顺序不可互换</strong>。因为要先安装才能使用。</p>
+
+当然，如果你喜欢用npm，也可以```npm install sweetalert --save```然后```import swal from 'sweetalert';```。如果这句话你没看懂，直接跳过并使用前一种方式就可以了。
+
+## Sweetalert进阶
+
+<button onclick="swal('Sweetalert生气了！','气死我了！难道你认为我就这么一个功能？','error');">点我，让Sweetalert气死</button>
+
+首先，这个图标，有多个预设："warning", "error", "success" 和"info"。
+
+```html
+<script type="text/javascript">
+swal("比较欣慰的Sweetalert","这还差不多。","info");
+</script>
+```
+<button onclick="swal('比较欣慰的Sweetalert','这还差不多。','info');">预览上方代码</button>
+
+你以为就这？别急，这才刚刚开始。先把按钮调整一下。
+
+```html
+<script type="text/javascript">
+swal("很高兴认识你！", {
+  button: "你好"
+});
+</script>
+```
+
+<script type="text/javascript">
+function typeHello() {
+    swal("很高兴认识你！", {
+  button: "你好"
+});
+}
+</script>
+
+<button onclick='javascript:typeHello()'>预览上方代码</button>
+
+好吧，基本的大致就这些。有关更多，请参见其[官方文档](https://www.sweetalert.cn/guides.html)。
+
+## 一些超炫的东西
+
+来几个炫酷的，基于Sweetalert的效果，来结束本文吧！
+
+首先，去Apple iTunes搜电影：
+
+```html
+<script type="text/javascript">swal({
+  text: '搜索电影名称：',
+  content: "input",
+  button: {
+    text: "搜索",
+    closeModal: false,
+  },
+})
+.then(name => {
+  if (!name) throw null;
+ 
+  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
+})
+.then(results => {
+  return results.json();
+})
+.then(json => {
+  const movie = json.results[0];
+ 
+  if (!movie) {
+    return swal("在iTunes上找不到相关电影！");
+  }
+ 
+  const name = movie.trackName;
+  const imageURL = movie.artworkUrl100;
+ 
+  swal({
+    title: "首选搜索结果：",
+    text: name,
+    icon: imageURL,
+  });
+})
+.catch(err => {
+  if (err) {
+    swal("哎呀！", "向iTunes发送的请求失败了！", "error");
+  } else {
+    swal.stopLoading();
+    swal.close();
+  }
+});</script>
+```
+
+<script type="text/javascript">
+function searchMov() {
+    swal({
+  text: '搜索电影名称：',
+  content: "input",
+  button: {
+    text: "搜索",
+    closeModal: false,
+  },
+})
+.then(name => {
+  if (!name) throw null;
+ 
+  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
+})
+.then(results => {
+  return results.json();
+})
+.then(json => {
+  const movie = json.results[0];
+ 
+  if (!movie) {
+    return swal("在iTunes上找不到相关电影！");
+  }
+ 
+  const name = movie.trackName;
+  const imageURL = movie.artworkUrl100;
+ 
+  swal({
+    title: "首选搜索结果：",
+    text: name,
+    icon: imageURL,
+  });
+})
+.catch(err => {
+  if (err) {
+    swal("哎呀！", "向iTunes发送的请求失败了！", "error");
+  } else {
+    swal.stopLoading();
+    swal.close();
+  }
+});
+}
+</script>
+
+<button onclick="javascript:searchMov()">预览上方代码</button>
+
+```html
+swal("说点什么吧？", {
+  content: "input",
+})
+.then((value) => {
+  swal(`你输入了：${value}`);
+});
+```
+<script type="text/javascript">
+function outInput() {
+    swal("说点什么吧？", {
+  content: "input",
+})
+.then((value) => {
+  swal(`你输入了：${value}`);
+});
+}
+</script>
+
+<button onclick="javascript:outInput()">预览上方代码</button>
+
+好吧，天知道我这篇文章写了多长时间，天知道这篇文章又会加载多长时间：这么多代码……好吧，本文就此了结吧。