如何关闭 element-ui 中的 $msgbox

Question

我用 $msgbox 配合 vnode 写了个上传插件, 运营的小伙伴用了之后纷纷表示, 能不能上传完了自动关闭浮层...

我查了半天文档, 发现貌似没有办法, 在这里提个问, 看看能不能找到靠谱的解决方案...

以下是主要代码:

// 上传浮层

import Vue from 'vue'
import uploader from '~/lib/ks3upload'

/**
 * 显示浮层弹框
 * @param {object}   options            参数
 * @param {array}    options.formats    [必传] 允许后缀, ['mp3', 'mp4', ...]
 * @param {boolean}  options.multiple   是否允许多个文件
 * @param {function} options.onSuccess  上传成功回调(所有文件), 传参 (fileList)
 */
function show (options = {}) {
  const {
    formats,
    multiple = true,
    maxSize = 500 // 单位mb
  } = options

  const temVM = new Vue({
    data () {
      return {
        accept: formats.map(item => `.${item}`).join(','),
        multiple,
        maxSize,
        fileList: [],
        tip: `只能上传${formats.join('/')}文件，且不超过${maxSize}mb`
      }
    },

    methods: {
      // 单个请求
      onRequest: params => {
        // console.log(params)
        const { file } = params
    
        const typeArray = file.type.split('/')
        const fileType = typeArray[0]
        const fileName = file.name.replace(`.${typeArray[1]}`, '')

        const onSuccess = (url, info) => {
          // ...

          clearTimeout(temVM.checkAllSuccessTimer)
          temVM.checkAllSuccessTimer = setTimeout(() => temVM.checkAllSuccess(), 1000)

          this.$message.success('上传成功')
          params.onSuccess(item)
        }

        const onError = error => {
          console.log('upload error', error)
          this.$message.error('上传错误, 请查看console')
          params.onError(error)
        }

        const onProgress = data => {
          // ...
        }

        // ...
    
        uploader.put(file, fileType, onSuccess, onError, { progress: onProgress })
      },

      onRemove: params => {
        // ...
      },

      checkAllSuccess () {
        // ...
      }
    }
  })

  // 应对打包报错 (h is not defined)
  const h = this.$createElement

  this.$msgbox({
    title: '上传文件',
    center: true,
    message: 
      <el-upload
        class="upload-demo"
        drag
        action="/upload"
        accept={temVM.accept}
        multiple={temVM.multiple}
        // onChange 不好使
        // before-upload={onChange}
        file-list={temVM.fileList}
        http-request={temVM.onRequest}
        before-remove={temVM.onRemove} >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">{temVM.tip}</div>
      </el-upload>,
    showConfirmButton: true,
    showCancelButton: false
  })
}

Vue.use({
  install (Vue) {
    Vue.prototype.$dialogUpload = show
  }
})

感谢...

Answer 1

感谢各位的回答~

答案都集中在 beforeClose 里的 done 方法, 用户需要点击关闭才会触发.

期望可以不点击, 直接关闭 $msgbox.

在文档中没有发现相关的说明, 去碰运气看源码时, 找到了:

https://github.com/ElemeFE/el... 最下面

MessageBox.close = () => {
  instance.doClose();
  instance.visible = false;
  msgQueue = [];
  currentMsg = null;
};

所以, 直接执行 this.$msgbox.close() 即可直接关闭浮层.

Answer 2

Answer 3

上传完了之后调用关闭的方法就可以了 done();

Answer 4

官方文档里有的，看下图