Element UI中MessageBox标准用法

你的名字 2022-12-20 06:09 101阅读 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 条评论，101人围观）

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

相关阅读

相关 Element-UI

目录 Layout 布局按钮组件结合 el-icon 使用单选框复选框日期组件表格分页对话框表单验证 -------------------

小咪咪/ 2024年03月22日 13:33/ 0 赞/ 83 阅读

相关 element-UI 中beforeLeave用法

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

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

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

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

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

相关 element-ui使用导航栏跳转路由用法

element-ui使用导航栏跳转路由用法首先复制官网的例子，在这基础上再修改成我们想要的样子。 <el-menu :default-active="acti

末蓝、/ 2023年02月20日 12:24/ 0 赞/ 14 阅读

相关 Element UI中MessageBox标准用法

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

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

相关 C#中MessageBox.Show的用法

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

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

相关 C# MessageBox的用法

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

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

相关 Mint-ui MessageBox.confirm

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

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

相关 Mint-ui MessageBox.prompt配置

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

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

相关 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 赞/ 320 阅读