鍍金池/ 問答/HTML/ 如何關閉 element-ui 中的 $msgbox

如何關閉 element-ui 中的 $msgbox

我用 $msgbox 配合 vnode 寫了個上傳插件, 運營的小伙伴用了之后紛紛表示, 能不能上傳完了自動關閉浮層...

我查了半天文檔, 發(fā)現(xiàn)貌似沒有辦法, 在這里提個問, 看看能不能找到靠譜的解決方案...

以下是主要代碼:


// 上傳浮層

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
  }
})

感謝...

回答
編輯回答
凝雅

clipboard.png

2017年2月14日 11:20
編輯回答
墨小羽

上傳完了之后調用關閉的方法就可以了 done();

2017年9月28日 08:08
編輯回答
愛礙唉

官方文檔里有的,看下圖
圖片描述

2018年8月27日 04:11
編輯回答
離人歸

感謝各位的回答~

答案都集中在 beforeClose 里的 done 方法, 用戶需要點擊關閉才會觸發(fā).

期望可以不點擊, 直接關閉 $msgbox.

在文檔中沒有發(fā)現(xiàn)相關的說明, 去碰運氣看源碼時, 找到了:

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


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

所以, 直接執(zhí)行 this.$msgbox.close() 即可直接關閉浮層.

2017年4月30日 06:48