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

1、this.$prompt

输入框弹窗

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

如图:
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify_第1张图片

2、this.$message

消息提示

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

如图:
在这里插入图片描述

3、,this.$confirm

确认弹框

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

如图:
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify_第2张图片

4、this.$notify

提示信息

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

如图:
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify_第3张图片

你可能感兴趣的:(element,ui,vue,vue.js,前端)