Element UI中MessageBox标准用法

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

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

相关阅读

相关 element-ui中使用loading

我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个暂无数据的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方...

素颜马尾好姑娘i/ 2024年04月18日 16:15/ 0 赞/ 29 阅读

相关 Element-UI

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

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

相关 Element MessageBox 弹框 $alert的使用

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

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

相关 Element UI中MessageBox标准用法

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

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

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

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

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

相关 C# MessageBox的用法

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

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

相关 Mint-ui MessageBox.confirm

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

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

相关 Mint-ui MessageBox.prompt配置

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

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

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

相关 Vue 中安装 element-ui

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

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