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

简述:在 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.mfbz.cn/a/766754.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pandas_DataFrame读写详解:案例解析(第24天)

系列文章目录 一、 读写文件数据 二、df查询数据操作 三、df增加列操作 四、df删除行列操作 五、df数据去重操作 六、df数据修改操作 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、 读写文…

华为DCN之:SDN和NFV

1. SDN概述 1.1 SDN的起源 SDN(Software Defined Network)即软件定义网络。是由斯坦福大学Clean Slate研究组提出的一种新型网络创新架构。其核心理念通过将网络设备控制平面与数据平面分离,从而实现了网络控制平面的集中控制,为…

深入理解C++中的锁

目录 1.基本互斥锁(std::mutex) 2.递归互斥锁(std::recursive_mutex) 3.带超时机制的互斥锁(std::timed_mutex) 4.带超时机制的递归互斥锁(std::recursive_timed_mutex) 5.共享…

图解 Kafka 架构

写在前面 Kafka 是一个可横向扩展,高可靠的实时消息中间件,常用于服务解耦、流量削峰。 好像是 LinkedIn 团队开发的,后面捐赠给apache基金会了。 kafka 总体架构图 Producer:生产者,消息的产生者,是消息的…

android AIDL使用demo

背景 最近打算学习一下如何在framework层添加一个自定义service。 了解到自定义service需要使用aidl,为了加强对aidl的了解和使用过程,特意又温习了一下aidl的使用,并用博客的形式记录下来。 aidl官方参考:https://developer.and…

不同系统间数据交换要通过 api 不能直接数据库访问

很多大数据开发提供数据给外部系统直接给表结构,这是不好的方式。在不同系统间进行数据交换时,通过API(应用程序编程接口)而非直接访问数据库是现代系统集成的一种最佳实践。 目录 为什么要通过API进行数据交换如何通过API进行数据…

论文辅导 | 基于多尺度分解的LSTM⁃ARIMA锂电池寿命预测

辅导文章 模型描述 锂电池剩余使用寿命(Remaining useful life,RUL)预测是锂电池研究的一个重要方向,通过对RUL的准确预测,可以更好地管理和维护电池,延长电池使用寿命。为了能够准确预测锂电池的RUL&…

STM32 看门狗 HAL

由时钟图可以看出看门狗采用的是内部低速时钟,频率为40KHz 打开看门狗,采用32分频,计数1250。 结合设置的分频系数和重载计数值,我们可以计算出看门狗的定时时间: 32*1250/40kHz 1s 主函数中喂狗就行 HAL_IWDG_Ref…

STM32 HAL库读取ID

在stm32f1xx_hal.c文件中由读取ID号的子函数,不同单片机的UID_BASE不同,本单片机用的是STM32F103CBT6,跳转之后可以看到地址为:0x1FFFF7E8 在程序中只需定义一个数组调用读取ID的函数即可 uint32_t UID[3]; while(1) { UID[0] HAL_GetUIDw0…

catia数控加工仿真铣平面粗加工

1,零件建模,毛坯建模 2 在毛坯上建立坐标系 3 添加资料刀具 4,双击对相关加工信息做设置 5 Roughing 加工设置 高亮红色区域是必选的,其他可以默认 6 完成加工仿真 7 加工余量

EasyExcel4导入导出数据(基于MyBatisPlus)

一、POM依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><m…

Camera Raw:编辑 - 细节

Camera Raw “编辑”模块中的细节 Detail面板用于增强照片的锐度和减少噪点。通过对锐化和降噪进行精细调整&#xff0c;可以提高图像的清晰度&#xff0c;减少噪点&#xff0c;提高图像质量。 ◆ ◆ ◆ 使用方法与技巧 1、增强照片锐度 较小的“半径”&#xff0c;较大的“细…

如何解决大文件传输存在的痛点,实现高效流转?

在当代的数字化时代&#xff0c;数据资产在各行各业中扮演着举足轻重的角色&#xff0c;而数据的流通与交换则是其价值得以实现的关键。企业在进行大文件传输时&#xff0c;都面临着诸多挑战&#xff0c;比如网络延迟、大小受限、安全风险等。因此&#xff0c;如何高效安全的进…

springboot个人证书管理系统16679

springboot个人证书管理系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了个人证书管理系统的开发全过程。通过分析个人证书管理系统管理的不足&#xff0c;创建了一个计算机管理个人证书管理系统的方案。文…

3、FTL基本工作过程

上文描述了FTL的四大功能&#xff0c;这里简述一下每个功能的含义。 地址转换简述 FTL要维护一个地址转换表&#xff0c;这个转换表是主机读/写硬盘的逻辑地址到硬盘实际物理地址的转换关系。 假如SSD的容量是128G&#xff0c;SSD逻辑块的大小是4KB&#xff0c;那SSD的逻辑块…

Linux系统的服务——以Centos7为例

一、Linux系统的服务简介 服务是向外部提供对应功能的进程&#xff0c;其运行在系统后台&#xff0c;能够7*24小时持续不断的提供外界随时发来的服务请求&#xff0c;且服务进程常驻在内存中&#xff0c;具有固定的端口号&#xff0c;通过端口号就能找到服务内容。 提供服务的一…

Linux源码阅读笔记10-进程NICE案例分析2

set_user_nice set_user_nice函数功能&#xff1a;设置某一进程的NICE值&#xff0c;其NICE值的计算是根据进程的静态优先级&#xff08;task_struct->static_prio&#xff09;&#xff0c;直接通过set_user_nice函数更改进程的静态优先级。 内核源码 void set_user_nice…

Unity3d C#实现基于UGUI ScrollRect的轮播图效果功能(含源码)

前言 轮播功能是一种常见的页面组件&#xff0c;用于在页面中显示多张图片/素材并自动或手动进行切换&#xff0c;以提高页面的美观度和用户体验。主要的功能是&#xff1a;自动/手动切换;平滑的切换效果;导航指示器等。可惜Unity的UGUI系统里没有现成的实现该功能&#xff0c…

BiTCN-Attention一键实现回归预测+8张图+特征可视化图!注意力全家桶再更新!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 原理简介 数据介绍 结果展示 全家桶代码目…

pom.xml文件加载后没有变成maven图标

原因&#xff1a; 开启了IDEA的节电模式 现象为&#xff1a; xml会变橙色&#xff0c;yml变粉色&#xff0c;自动提示关闭等 把这个节能模式的勾选给取消掉就可以正常显示了