Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify

柔情只为你懂 2023-01-11 08:49 536阅读 0赞

## 1、this.$prompt ##

输入框弹窗

if (object == undefined) { 
            this.$prompt('请输入', '添加优惠券分类', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(async ({  value }) => { 
              
              })

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]

## 2、this.$message ##

消息提示

if (result.result) { 
                this.$message({ 
                  type: 'success',
                  message: '添加成功'
                })
                this.getData()
              } else { 
                this.$message({ 
                  type: 'error',
                  message: result.msg
                })
              }

如图：  
![在这里插入图片描述][20210126111120406.PNG_pic_center]

## 3、,this.$confirm ##

确认弹框

handleDel(row) { 
          this.$confirm(`确认删除图片 ${ row.pictureName} 吗?`, '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
            this.deletePicture(row.id)
          }).catch(() => { });
        },

如图：  
![在这里插入图片描述][20210126111438490.PNG_pic_center]

## 4、this.$notify ##

提示信息

if (file) { 
            this.$notify({ 
              title: '成功',
              message: '图片上传成功',
              type: 'success'
            });
          }

如图：  
![在这里插入图片描述][20210126111754379.PNG_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/a01e4481bf904f638accc42a076d348c.png
[20210126111120406.PNG_pic_center]: /images/20221119/6e53f91e7aef49e59c13b32c0ab8be64.png
[20210126111438490.PNG_pic_center]: /images/20221119/36549e44c36043a09c5816769b481395.png
[20210126111754379.PNG_pic_center]: https://img-blog.csdnimg.cn/20210126111754379.PNG#pic_center