vue element插件this.$confirm用法及说明(取消也可以发请求)

我赞美你品格高尚,崇敬你洁白无瑕。我爱你、想你、盼你,像对每一个季节那样。我爱你、想你、盼你,不管世俗的偏见怎样厉害。冬――四季之一的冬,你来吧!我喜欢你纯净的身躯,喜欢你严厉的性格,我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花,夏天的麦浪,秋天的瓜果……比美!

element插件this.$confirm用法

场景:弹出框的两个按钮都能分别请求接口

最简单的弹出框就是“确定”“取消”,一般用户点击确定才会继续接下来的动作,点击取消则不做任何动作(即不会请求接口)。

如:

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
    }).then(() => {
     this.$message({
      type: 'success',
      message: '删除成功!'
     });
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '已取消删除'
     });     
    });
   }
  }
 }
</script>

两个按钮都请求,则:

//任务下线
offline(data){
  this.$confirm('是否开启保存点?', {
    distinguishCancelAndClose: true,
    confirmButtonText: '是',
    cancelButtonText: '否', //相当于 取消按钮
    type: 'warning'
  }).then(() => {
    api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
      if (res.data.code === "100") {
        this.$message({type: 'success', message: '下线成功!'})
        this.getTableData()
      } else {
        this.$message({type: 'error', message: res.data.msg})
        this.getTableData()
      }
    })
  }).catch(action => {
  //判断是 cancel (自定义的取消) 还是 close (关闭弹窗)
    if (action === 'cancel'){
      api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
        if (res.data.code === "100") {
          this.$message({type: 'success', message: '下线成功!'})
          this.getTableData()
        } else {
          this.$message({type: 'error', message: res.data.msg})
          this.getTableData()
        }
      })
    }
  })

默认情况下,当用户触发取消(点击取消按钮)和触发关闭(点击关闭按钮或遮罩层、按下 ESC 键)时,Promise 的 reject 回调和callback回调的参数均为 ‘cancel’(普通弹出框中的点击取消时的回调参数)。

如果将distinguishCancelAndClose属性设置为 true,则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。(注意:如果没有设置distinguishCancelAndClose为true,则都默认为取消)

这样就可以在catch中拿到回调参数action进行判断做什么操作了

vue项目如何使用this.$confirm

首先在element-ui中的el-table下的el-table-column中引入插槽(相当于占位符)

<template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
       >编辑</el-button
      >
      <el-button
       size="mini"
       type="danger"
       @click="handleDelete(scope.$index, scope.row)"
       >删除</el-button
      >
     </template>
handleDelete(index, item) {
   this.$confirm("你确定要删除吗,请三思,后果自负", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
   })
    .then(() => {
     console.log("确定了,要删除");
    })
    .catch(() => {
     console.log("放弃了");
    });
  },

此时,需要在main.js中注册组件

import {MessageBox} from 'element-ui';

// Vue.use(MessageBox);//与其他引用不同的是,这里“不能”加Vue.use(MessageBox),不然会出现问题,达不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

标签: amp vue