Element中的消息提示组件Message和弹框组件MessageBox

news2024/12/23 6:32:11

简述:在 Element UI 中,Message和MessageBox都是比较常用的组件,Message用来提示消息,而MessageBox是一个用于创建模态对话框的组件。它可以用于在页面上快速展示信息、警告或错误提示,而不会阻止用户的其他操作。简单记录


一. 提示框,Message

// 显示提示信息的方法
this.$message({
  message: "请点击线路进行绑定",         // 提示信息内容
  type: "",                            // 提示类型,如success, warning, error等
  //type: "success",                   // 成功提示(已注释)
  //type: "warning",                   // 警告提示(已注释)
  //type: "error",                     // 错误提示(已注释)
  center: true,                        // 提示信息文字居中
  offset: 400,                         // 提示信息的垂直位置偏移量
  duration: 1500,                      // 提示信息显示持续时间(毫秒)
  showClose: true,                     // 是否显示关闭按钮
  customClass: "BusLineMsg",           // 自定义类名
  iconClass: "el-icon-edit-outline",   // 图标样式类名
}); 

二. 表格删除事件,删除提示,MessageBox

// 删除操作的处理函数
handleDelete(index, row) {
  // 显示确认对话框
  this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",         // 确认按钮文本
    cancelButtonText: "取消",          // 取消按钮文本
    type: "warning",                   // 提示类型(警告)
  })
  .then(() => {
    // 确认删除后的操作

    // 开启加载状态
    this.tableLoading = true;

    // 初始化数组用于存放要删除的文件ID
    const ArrUuid = [];
    // 将当前行的ID添加到数组中
    ArrUuid.push(row.id);

    // 调用删除操作的接口方法
    delbypassControl(ArrUuid)
      .then((res) => {
        // 接口请求成功后的处理
        console.log(res);
        if (res.code === 200) {
          // 删除成功后显示提示信息
          this.$message({
            message: "删除成功",     // 提示信息内容
            type: "success",        // 提示类型(成功)
            center: true,           // 提示信息文字居中
            offset: 400,            // 提示信息的垂直位置偏移量
          });
          // 调用刷新数据的方法
          this.callbypassControl();
        }
      })
      .catch(() => {
        // 接口请求失败后的处理
        this.tableLoading = false; // 关闭加载状态
      })
      .finally(() => {
        // 接口请求完成后的处理
        this.tableLoading = false; // 关闭加载状态
      });

  })
  .catch(() => {
    // 用户取消删除操作后的处理

    // 显示取消删除的提示信息
    this.$message({
      type: "info",          // 提示类型(信息)
      message: "已取消删除",  // 提示信息内容
      offset: 400,           // 提示信息的垂直位置偏移量
    });
  });
}, 

 

三. Message和MessageBox,更多配置

Element官网icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN/component/select

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1894413.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日复盘-20240704

今日关注: 20240704 六日涨幅最大: ------1--------300391--------- 长药控股 五日涨幅最大: ------1--------300391--------- 长药控股 四日涨幅最大: ------1--------300391--------- 长药控股 三日涨幅最大: ------1--------300391--------- 长药控股 二日涨幅最…

Linux和mysql中的基础知识

cpu读取的指令大部分在内存中(不考虑缓存) 任何程序在运行之前都的加入到内存。 eip->pc指针,指明当前指令在什么位置。 代码大概率是从上往下执行的,基于这样的基本理论。既可以将一部分指令加载到CPU对应的缓存中&#xf…

B站大课堂-自动化精品视频(个人存档)

基础知识 工业通信协议 Modbus 施耐德研发,有基于以太网的 ModbusTCP 协议和使用 485/232 串口通信的 ModbusRTU/ASCII。 Modbus 协议面世较早、协议简洁高效、商用免费、功能灵活、实现简单,是目前应用最广泛的现场总线协议。 我的笔记里边有一些推荐…

Django学习第四天

启动项目命令 python manage.py runserver 分页功能封装到类中去 封装的类的代码 """ 自定义的分页组件,以后如果想要使用这个分页组件,你需要做: def pretty_list(request):# 靓号列表data_dict {}search_data request.GET.get(q, &…

【算法】(C语言):堆排序

堆(二叉树的应用): 完全二叉树。最大堆:每个节点比子树所有节点的数值都大,根节点是最大值。父子索引号关系(根节点为0):(向上)子节点x,父节点(x…

四、(3)补充beautifulsoup、re正则表达式、标签解析

四、(3)补充beautifulsoup、re正则表达式、标签解析 beautifulsoupre正则表达式正则提取标签解析 beautifulsoup 补充关于解析的知识 还需要看爬虫课件 如何定位文本或者标签,是整个爬虫中非常重要的能力 无论find_all(&#xff…

relation-graph——数据组装+鼠标移入后的详情(自定义插槽的用法)——js技能提升

最近在写后台管理系统的时候,遇到一个需求,就是给我一些节点,让我渲染到页面上,效果图如下: 之前写过一篇文章关于relation-graph关系图组件http://t.csdnimg.cn/7BGYm的用法 还有一篇关于relation-graph——实现右击…

上位机GUI 第三弹

😊 😊 😊 从协议层面讲,地质单元相当重要,调试模式,我只能义命令发送的索引码作为,每个设备的区分方式,调试的情况,不在设备上设置任何东西,开机访问地址和端口就能用 因为懒,直接将…

【你真的了解double和float吗】

🌈个人主页:努力学编程’ ⛅个人推荐:基于java提供的ArrayList实现的扑克牌游戏 |C贪吃蛇详解 ⚡学好数据结构,刷题刻不容缓:点击一起刷题 🌙心灵鸡汤:总有人要赢,为什么不能是我呢 …

MySQL数据恢复(适用于误删后马上发现)

首先解释一下标题,之所以适用于误删后马上发现是因为太久了之后时间和当时操作的数据表可能会记不清楚,不是因为日志丢失 1.首先确保自己的数据库开启了binlog(我的是默认开启的我没有配置过) 根据这篇博客查看自己的配置和自己…

Redis持久化的三种方式(RDB、AOF和混合)

Redis持久化的三种方式(RDB、AOF和混合) 目录 Redis持久化的三种方式(RDB、AOF和混合)介绍RDB示例1.配置文件2.触发 RDB 快照保存3.验证 AOF示例1.配置文件2.校验 混合型持久化存储配置文件 介绍 Redis数据主要存储与内存中,因此如果服务器意外重启、宕机、崩溃&am…

Linux Rsyslog+LogAnalyzer+MariaDB部署日志服务器

文章目录 Linux RsyslogLogAnalyzerMariaDB部署日志服务器1 环境准备1.1 服务器端安装LAMP环境1.2 服务启动并加入开机启动1.2.1 Apache1.2.2 MariaDB1.2.3 Php 2 Rsyslog服务端安装及配置2.1 安装Rsyslog及Rsyslog连接MySQL的模块2.2 导入rsyslog-mysql数据库文件2.3 查看刚导…

vector与list的简单介绍

1. 标准库中的vector类的介绍: vector是表示大小可以变化的数组的序列容器。 就像数组一样,vector对其元素使用连续的存储位置,这意味着也可以使用指向其元素的常规指针上的偏移量来访问其元素,并且与数组中的元素一样高效。但与数…

顶级5款有用的免费IntelliJ插件,提升你作为Java开发者的旅程

在本文中,我们将深入探讨IntelliJ IDEA插件——那些可以提升你生产力的神奇附加组件,并微调你的代码以达到卓越。我们将探索5款免费插件,旨在将你的开发水平提升到一个新的高度。 1. Test Data 使用Test Data插件进行上下文操作 作为开发者&a…

IT之旅启航:高考后IT专业预习全攻略

✨作者主页: Mr.Zwq✔️个人简介:一个正在努力学技术的Python领域创作者,擅长爬虫,逆向,全栈方向,专注基础和实战分享,欢迎咨询! 您的点赞、关注、收藏、评论,是对我最大…

yum命令提示 错误:rpmdb: BDB0113 Thread/process 4153/139708200269632

一、报错信息 [rootDawn yum.repos.d]# yum clean all 错误:rpmdb: BDB0113 Thread/process 4153/139708200269632 failed: BDB1507 Thread died in Berkeley DB library 错误:db5 错误(-30973) 来自 dbenv->failchk:BDB0087 DB_RUNRECOVE…

【AI】DeepStream(14):图像分割deepstream-segmentation-test示例演示

【AI】AI学习目录汇总 1、简介 deepstream-segmentation-test示例演示了图像的语义分割。两个配置文件,分别加载U-Net和Res-UNet两种分割模型 unet_output_graph.uffunetres18_v4_pruned0.65_800_data.uffU-Net是一个在生物医学图像分割领域广泛应用的卷积神经网络(CNN),…

PHP花涧订购系统-计算机毕业设计源码00332

摘 要 近年来,电子商务的快速发展引起了行业和学术界的高度关注。花涧订购系统旨在为用户提供一个简单、高效、便捷的花卉购物体验,它不仅要求用户清晰地查看所需信息,而且还要求界面设计精美,使得功能与页面完美融合,…

Flume集群部署(手把手部署图文详细版)

前景概要: Kafka消息订阅系统在大数据业务中有着重要运用,尤其在实时业务中,kafka是必不可少的组件之一。 Flume是大数据组件中重要的数据采集工具,我们常利用Flume采集各种数据源的数据供其他组件分析使用。例如在实时业务中&…

实践Go的命令模式

简介 现在的软件系统往往是分层设计。在业务层执行一次请求时,我们很清楚请求的上下文,包括,请求是做什么的、参数有哪些、请求的接收者是谁、返回值是怎样的。相反,基础设施层并不需要完全清楚业务上下文,它只需知道…