Element UI中MessageBox标准用法

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

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

相关阅读

相关 Element-UI

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

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

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

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

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

相关 Element UI中MessageBox标准用法

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

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

相关【 Element UI 】—Element UI 的基本使用

【 Element UI 】—Element UI 的基本使用一、基于命令行的方式手动安装 npm 安装 npm i element-ui -S

以你之姓@/ 2022年09月16日 04:45/ 0 赞/ 188 阅读

相关 C#中MessageBox.Show的用法

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

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

相关 C# MessageBox的用法

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

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

相关 Mint-ui MessageBox.confirm

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

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

相关 Mint-ui MessageBox.prompt配置

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

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

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

相关 Vue 中安装 element-ui

在当前项目下输入 npm i element-ui -S ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

桃扇骨/ 2021年07月25日 13:42/ 0 赞/ 518 阅读