鍍金池/ 問(wèn)答/HTML/ 如何關(guān)閉 element-ui 中的 $msgbox

如何關(guān)閉 element-ui 中的 $msgbox

我用 $msgbox 配合 vnode 寫(xiě)了個(gè)上傳插件, 運(yùn)營(yíng)的小伙伴用了之后紛紛表示, 能不能上傳完了自動(dòng)關(guān)閉浮層...

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

以下是主要代碼:


// 上傳浮層

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

/**
 * 顯示浮層彈框
 * @param {object}   options            參數(shù)
 * @param {array}    options.formats    [必傳] 允許后綴, ['mp3', 'mp4', ...]
 * @param {boolean}  options.multiple   是否允許多個(gè)文件
 * @param {function} options.onSuccess  上傳成功回調(diào)(所有文件), 傳參 (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('/')}文件,且不超過(guò)${maxSize}mb`
      }
    },

    methods: {
      // 單個(gè)請(qǐng)求
      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('上傳錯(cuò)誤, 請(qǐng)查看console')
          params.onError(error)
        }

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

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

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

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

  // 應(yīng)對(duì)打包報(bào)錯(cuò) (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>點(diǎn)擊上傳</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
編輯回答
墨小羽

上傳完了之后調(diào)用關(guān)閉的方法就可以了 done();

2017年9月28日 08:08
編輯回答
愛(ài)礙唉

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

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

感謝各位的回答~

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

期望可以不點(diǎn)擊, 直接關(guān)閉 $msgbox.

在文檔中沒(méi)有發(fā)現(xiàn)相關(guān)的說(shuō)明, 去碰運(yùn)氣看源碼時(shí), 找到了:

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


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

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

2017年4月30日 06:48