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

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

以下是主要代碼:

// 上傳浮層

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('/')}文件，且不超過${maxSize}mb`
      }
    },

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

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

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

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

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

  // 應(yīng)對打包報(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
  }
})

感謝...