ElementUI MessageBox 弹框

╰+攻爆jí腚メ 2022-11-01 00:47 218阅读 0赞

# 一、概述 #

在执行删除操作时，我们一般会添加一个删除确认框，当用户点击确认删除后在执行删除操作，这样能提升用用户体验，  
那么该如何快速实现呢？element中提供了相应的确认框，在官方文档中不太好找，其实在message box弹框中，  
有一个确认消息

# 二、代码实现 #

test.vue

<template>
      <div style="width: 100%">
        <el-button type="text" @click="open">点击打开 Message Box</el-button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {
          open() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }
      }
    </script>
    
    <style>
    </style>

访问页面，效果如下：

![503b3e2a3b8d36bc2740c53967a4e004.gif][]

本文参考链接：

[https://element.eleme.io/\#/zh-CN/component/message-box][https_element.eleme.io_zh-CN_component_message-box]

[503b3e2a3b8d36bc2740c53967a4e004.gif]: /images/20221024/0aa8b2c7e93c4d1cbca8231a1125b32b.png
[https_element.eleme.io_zh-CN_component_message-box]: https://element.eleme.io/#/zh-CN/component/message-box

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关在ElementUI的 MessageBox 弹框进行api接口请求

confirmDelete(row) { let that = this; let data = { i

太过爱你忘了你带给我的痛/ 2023年10月11日 10:42/ 0 赞/ 46 阅读

相关 Vue+elementUI弹出框的使用（demo代码详细分析）

> 【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ > > 博客来源于项目以及编程中遇到的问题总结，偶尔会有

迈不过友情╰/ 2023年10月05日 06:56/ 0 赞/ 10 阅读

相关 elementui 点击删除按钮弹出提示框

在使用 elementui 的时候，如果要点击删除按钮弹出提示框，可以使用 elementui 提供的 Dialog 组件。首先，在 template 中添加 Dialog

今天药忘吃喽~/ 2023年09月25日 15:29/ 0 赞/ 84 阅读

相关 Element MessageBox 弹框 $alert的使用

import { MessageBox } from "element-ui"; MessageBox.alert("未授权，请先登录", "提示",

比眉伴天荒/ 2022年12月25日 10:00/ 0 赞/ 481 阅读

相关 ElementUI MessageBox 弹框

一、概述在执行删除操作时，我们一般会添加一个删除确认框，当用户点击确认删除后在执行删除操作，这样能提升用用户体验，那么该如何快速实现呢？element中提供了相应

╰+攻爆jí腚メ/ 2022年11月01日 00:47/ 0 赞/ 219 阅读

相关 ElementUI - 手动关闭 messageBox 实例弹框

前言 > ElementUI - message Box文档 : [https://element.eleme.cn/\/zh-CN/component/message-

Myth丶恋晨/ 2022年10月12日 01:22/ 0 赞/ 354 阅读

相关 elementui 组件Popover弹出框点击内容区关闭弹出框的解决办法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小咪咪/ 2022年10月11日 14:56/ 0 赞/ 1182 阅读

相关 mint-ui 修改MessageBox.prompt弹框中input的默认值

MessageBox.prompt(' ', '修改用户名', {inputValue: '这里设置默认值'}).then(({ value, action }) =>

ゝ一世哀愁。/ 2022年05月08日 13:38/ 0 赞/ 475 阅读

相关【C#】——MessageBox 消息框

不用MessageBox的情况：有的部分用提示框反而麻烦些，可以选择用labal可以提示需要的信息： labShow.Visible = true;

红太狼/ 2022年04月11日 08:13/ 0 赞/ 461 阅读

相关 Notice-MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm

朴灿烈づ我的快乐病毒、/ 2022年03月22日 04:13/ 0 赞/ 251 阅读