day07/下午/141-尚硅谷-尚融宝-删除功能确认

好，我们来优化一下，它第一个优化呢，就是咱们在点这个删除的时候啊，一点一不小心点错了，发现看看它已经删了来不及了，是不是，所以说像这种破坏性的操作呢，我们一般呢，都要事先给用户一个提示，就是问他你要不要删，如果你要删我再删，如果你不要删，那我暂时先不删啊就这个意思，那所以怎么做呢，我呢在呃这个地方。先找到element UI啊，Element UI里面呢，有一个嗯，Message box弹窗哈，这块有一个叫确认消息，然后我们点你看它就是说提示此操作将永久删除，该文件是否继续，然后我们要取消，它就取消了啊，然后你再点你点确定，那它就删除成功了，所以呢，其实我们要的就是这个功能，那我们呢，把这个功能呢，整合到我们项目当中，点开，点开之后呢，它这代码虽然比较多啊，但是我们是可以分析的，嗯，看一下别粘错了，这面是一个括号，两个括号三个括号啊，然后后面这是一个括号，两个括号三个括号，我们占这里面的内容。

把这个复制一下好。然后接下来呢，我们把这个。功能呢，复制复制到我们的代码当中，就是复制到咱们删除这个代码当中，当然了，因为这个刚才咱们复制这个代码的结构比较复杂，所以咱们先粘到这儿啊，后面这部分呢，先暂时屏蔽掉，别删来删去又删没了，先不调用它，先看上面这块啊，看看这一部分功能是不是整合进来了，所以呢，我们打开我们的这个代码看看，点删除，诶弹出来了哈，然后点取消是不是有了啊，然后呢，再点删除。然后再点确定，所以有了就说明这个弹窗功能有了，但是现在呢，咱们要把上面的这个弹窗和下面的这个真正的删除呢啊，给它整合到一起，那我们就需要看看上面这个具体的功能它是怎么实现的了啊，它这个功能呢，叫this.confirm要确认，然后呢，这个里面弹窗里面弹的这个标题，还有消息提示，以及前面这个感叹号叫消息类型，以及后面的这两个按钮都是可以定制的，怎么定制呢？你看这个是标题叫提示，这个是此操作将永久删除该文件是否继续他们呢，就是分别在这儿定制的和在这儿定制的是不是啊，你就改就行了，此操作将永久删除该记录吧。

是否继续啊，然后呢，这个type是war，这个war呢，就是决定了这块就显示一个感叹号啊，如果你type是别的，还有什么别的type吗？那也好办呢，你看咱们在这个消息box弹窗这块，看看后面的文档啊，不是教过大家吗？是不是看看type还有没有什么别的参数的值，有success，有in for，有刚才我们的Bo，还有error，还有这样四个值啊，你可以选一个，当然这肯定是成功了，这个应该就是一个啊普通的消息啊，这是一个错误，然后这个是警告，所以刚才我们选的是警告，警告的话呢，那就展示一个感叹号。

好，这是这块的感叹号，这块的标题以及这块的内容，然后接下来呢，就是这两个按钮了，这两个按钮的话，一个呢，叫做confirm button text，就是固定的配置值，如果你把这个配置给confirm button text，它就是确定按钮的那个文本啊，你说我不想叫确定，这样OK，那也行，你说我不想叫取消，我我想叫不删除是吧，都行啊，不删除好。真的保存一下看看。点这个删除，那这叫OK对吧，这叫不删除，所以呢，我们就可以定制这个按钮啊好，我先给大家取消一下，然后接下来呢，我们再回头，我得把它改回来不太好，好。

然后接下来呢，我们来看，如果你点击了确定的话，它其实干嘛呢？会走这个问语句，这个是这个confirm里面的业务逻辑，如果你点击了确定，它会走问，相当于promise的成功，如果你点击了取消，它会走catch，相当于promise的失败，明白吧，好，所以这个是弹出了一个message框，这message框呢叫删除成功，这边呢又弹出一个message框，这个message框呢叫已取消删除啊好，我们来试一下删除，然后点确定是不是删除成功啊，好，然后啊删除，然后我们点取消是不是已取消删除啊，所以这块就是这样的一个业务逻辑了，那这块大家如果读懂了的话呢，你想一想，当我们点击确定，然后他要弹删除成功的时候，是不是就掉我们这段代码就可以了。

对吧？啊，所以呢，我们把这段代码呢，给它剪切过来，然后呢，直接把这个删除成功啊，给它删掉就行了，然后在这个地方呢，咱们把它粘贴过来，所以呢，一旦点击了确定，先去后台调用阿贾克斯对吧？啊，调用后台的API接口，然后真正的去执行后台的删除，后台一旦删除成功了，我们再弹出删除成功的提示，然后接下来fetch data刷新当前的列表页，好，然后如果取消了，我们就弹出已取消删除就可以了，所以这样的话呢，我们就把整个的删除功能和它的这个啊，弹窗啊，确认按钮啊就都整合到一起了，然后那我们来试一下刷新，然后呢，在这个地方咱们还是点删除取消没问题啊，好，然后接下来呢，咱们再点删除，注意啊，看看这条记录是不是？

没了，并且刷新了。确定诶是不是就成功了，所以这样的话呢，就完成了我们的一个完整的删除功能的一个弹窗提示的这样的一个功能啊，做了一个优化。