Element UI中MessageBox标准用法

你的名字 2022-12-20 06:09 128阅读 0赞

## 第一步：在main.js文件中导入 ##

import {  MessageBox } from 'element-ui'
    
    Vue.prototype.$confirm = MessageBox.confirm

## 第二步：页面中使用 ##

页面：

<el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeleteUserDialog(24)"></el-button>

对应的方法：

async showDeleteUserDialog (userId) {  //删除用户
      const confirmRes = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { 
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) //用catch来捕获错误消息
      
      //用户单击确认，返回值为字符串confirm; 单击取消，返回值为字符串cancel
      if ('cancel' === confirmRes) { //用户点击了取消
        return this.$message.info('已经取消了删除')
      }
      if ('confirm' === confirmRes) {  //用户点击了确认
        const {  data: res } = await this.$axios.delete(`/user/deleteUserById/${ userId}`)
        console.log(res)
        if (res.code !== 200) { 
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        //刷新用户列表
        this.page(this.queryInfo)
      }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 element-UI 中beforeLeave用法

之所以将这个问题列在排坑记之中，是因为官方组件的一个属性颇有些隐蔽，这个问题曾经折腾了本人较多时间，始终思维固着，且使用搜索引擎也不容易搜索到答案，故记之。然而实际解决却是相当

怼烎@/ 2023年06月12日 12:26/ 0 赞/ 41 阅读

相关 element-ui el-radio-button 用法

<div> <el-radio-group style="display: flex;flex-flow:row nowrap;justify-conten

た入场券/ 2023年05月28日 12:54/ 0 赞/ 60 阅读

相关 element-ui Messagebox 显示不全的问题

第一步：需要导入Messagebox组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

柔光的暖阳◎/ 2023年03月01日 12:27/ 0 赞/ 20 阅读

相关 vue element-ui MessageBox按需调用

按需引入组件 MessageBox的使用方法 main.js import { Button,MessageBox } from 'element-ui';

超、凢脫俗/ 2023年02月12日 15:28/ 0 赞/ 58 阅读

相关 Element UI中MessageBox标准用法

第一步：在main.js文件中导入 import { MessageBox } from 'element-ui' Vue.prototype

你的名字/ 2022年12月20日 06:09/ 0 赞/ 129 阅读

相关 C#中MessageBox.Show的用法

收藏下，用时看看即可，原文地址：[http://blog.sina.com.cn/s/blog\_65209e220100s2zt.html][http_blog.sina.c

ゝ一世哀愁。/ 2022年08月07日 12:49/ 0 赞/ 55 阅读

相关 C# MessageBox的用法

我们在程序中经常会用到MessageBox。 MessageBox.Show()共有21中重载方法。现将其常见用法总结如下： 1.MessageBox.Show(“Hell

你的名字/ 2022年07月12日 02:53/ 0 赞/ 249 阅读

相关 Mint-ui MessageBox.confirm

Mint-ui MessageBox.confirm 问题: 官方文档写法只能获取点击确认后的状态，默认点击取消报错 MessageBox.confirm(

本是古典何须时尚/ 2022年06月16日 04:53/ 0 赞/ 243 阅读

相关 Mint-ui MessageBox.prompt配置

Mint-ui 弹框配置官方文档描述不清晰，复制粘贴效果不理想，最后看源码，找配置解决 MessageBox.prompt('请输入姓名').then((

朴灿烈づ我的快乐病毒、/ 2022年06月16日 04:12/ 0 赞/ 166 阅读

相关 Mint-ui 中的MessageBox confirm详细使用

官方中文文档url: [http://mint-ui.github.io/docs/\/zh-cn2/message-box][http_mint-ui.github.io_d

以你之姓@/ 2022年03月15日 10:56/ 0 赞/ 366 阅读