Element UI Message消息提示及确认消息弹框

va8zu9ts

已于 2023-04-11 14:23:06 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

于 2023-03-23 18:14:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70265923/article/details/129736440

本文展示了在Vue.js应用中使用ElementUI库进行消息提示和确认对话框的操作方法，包括success、error、warning类型的提示以及确认消息弹框的回调函数处理。

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

1.成功提示

this.$message.success("恭喜你，这是一条成功消息");

2.错误提示

this.$message.error("错了哦，这是一条错误消息");

3.警告提示

this.$message.warning("警告哦，这是一条警告消息");

3.普通提示

this.$message("这是一条消息提示");

4.在js文件中使用Message消息提示

import { Message } from "element-ui";//js文件使用element-ui消息提示
Message.warning("登录状态过期，请重新登录！");

5.确认消息弹框


      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "点击确定时调用的方法!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "点击取消时调用的方法",
          });
        });