ElementUI中MessageBox弹窗回调函数实例

1.使用前提

全局方法

如果你完整引入了 Element,它会为 Vue.prototype 添加如下全局方法:msgbox, alert, confirm 和 prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为:

  • $msgbox(options)
  • $alert(message, title, options)$alert(message, options)
  • $confirm(message, title, options)$confirm(message, options)
  • $prompt(message, title, options)$prompt(message, options)

单独引用

如果单独引入 MessageBox

import { MessageBox } from 'element-ui';

那么对应于上述四个全局方法的调用方法依次为:MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt,调用参数与全局方法相同。

2.参数简介

callback——若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调。
function(action, instance),action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法。

3.实例代码

本例是直接在Element官方文档中MessageBox—确认消息的原例中,实现了点击确认后回调自定义方法。

<template>
  <el-button type="text" @click="open2">删除</el-button>
</template>

<script>
  export default {
    methods: {
    verify() {
      console.log('delete')
    },
      open2() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(action => {
          if (action === 'confirm') {
            this.verify()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容