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

最新推荐文章于 2025-02-04 18:01:06 发布

原创最新推荐文章于 2025-02-04 18:01:06 发布 · 9.1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

element ui

8 篇文章

订阅专栏

本文介绍了Element UI中常用的四个弹窗组件：$prompt用于输入框弹窗，$message用于消息提示，$confirm用于确认操作的弹框，而$notify则用于显示提示信息。每个组件都配合示例图片进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、this.$prompt

输入框弹窗

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

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

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(() => {});
    },

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

4、this.$notify

提示信息

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

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