Vue设置提示和警告弹出框实战案例

拽拽的胖子

案例1:

1. const handleDelete = (index, row) => {
   
2.   if (!isEmptyList(row.children)) {
   
3.     ElMessageBox.confirm('该分类下存在子分类，不可删除！', '提示', {
   
4.       type: 'warning',
   
5.       confirmButtonText: '确认'
   
6.     });
   
7.     return;
   
8.   }
   
9.   const id = row.groupId;
   
10.   selectResource(id).then(response => {
    
11.     if (!isEmptyList(response.data)) {
    
12.       ElMessageBox.confirm('该分类下已经分配资源，确定要删除吗?', "警告", {
    
13.         confirmButtonText: "确定",
    
14.         cancelButtonText: "取消",
    
15.         type: "warning"
    
16.       }).then(function () {
    
17.         return deleteGroup(id);
    
18.       });
    
19.     } else {
    
20.       ElMessageBox.confirm('确认删除名称为"' + row.groupName + '"的数据项?', "警告", {
    
21.         confirmButtonText: "确定",
    
22.         cancelButtonText: "取消",
    
23.         type: "warning"
    
24.       }).then(function () {
    
25.         return deleteGroup(id);
    
26.       });
    
27.     }
    
28.   });
    
29. };

复制代码

1. 这段代码是一个函数，名为`handleDelete`，接受两个参数：`index`和`row`。主要用于处理分类数据的删除操作。
   
2. 函数首先判断该分类是否存在子分类，如果存在则不允许删除，并通过`ElMessageBox`弹出提示框，提醒用户不可删除。
   
3. 如果分类下没有子分类，该函数会检查该分类是否已经分配了资源。如果已经分配了资源，则通过`ElMessageBox`弹出确认框，让用户确认是否要删除该分类及其下属所有资源。如果用户确认，会执行`deleteGroup`函数，将该分类从数据库中删除。
   
4. 如果分类下没有资源，则直接通过`ElMessageBox`弹出确认框，让用户确认是否要删除该分类。如果用户确认，也会执行`deleteGroup`函数，将该分类从数据库中删除。
   
5. 总之，这段代码主要完成了分类数据的删除操作，需要依赖`ElMessageBox`组件和`deleteGroup`函数。

复制代码

案例2：

1. const handleEdit = (index, row) => {
   
2.   resetForm();
   
3.   const id = row.groupId;
   
4.   selectResource(id).then(response => {
   
5.     if (!isEmptyList(response.data)) {
   
6.       ElMessageBox.confirm('该分类已经分配资源，不可修改！', '提示', {
   
7.         type: 'warning',
   
8.         confirmButtonText: '确认'
   
9.       });
   
10.       return;
    
11.     } else {
    
12.       dialogParam.type = row.type;
    
13.       caGroupTreeSelect(id);
    
14.       getCaGroupDetails(id).then(response => {
    
15.         caGroupForm.value = response.data;
    
16.         dialogParam.open = true;
    
17.         dialogParam.title = "修改分类";
    
18.       });
    
19.     }
    
20.   });
    
21. };

复制代码

1. 这段代码定义了一个名为handleEdit的函数,它有两个参数：index和row。在函数内部，resetForm()函数会重置一个表单。然后，使用row.groupId作为参数调用了一个名为selectResource的函数，该函数的返回值是一个Promise对象。在Promise对象的回调函数中，使用了一个名为isEmptyList的函数来检查response.data是否是一个空列表。如果response.data不是一个空列表，那么会显示一个带有警告图标的提示框，告诉用户该分类已经分配资源，不可修改。如果response.data是一个空列表，则会将dialogParam.type设置为row.type，调用caGroupTreeSelect函数，并使用id作为参数调用getCaGroupDetails函数。getCaGroupDetails函数会返回一个Promise对象，其回调函数会将response.data的值赋给caGroupForm.value，打开一个名为dialogParam的对话框，将其标题设置为"修改分类"。

复制代码

总结

到此这篇关于Vue设置提示和警告弹出框的文章就介绍到这了,更多相关Vue设置提示和警告弹出框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3162225r4.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！