jeft-upload-progress 上传进度展示

文档与演示

插件地址-jeft-vue

use

plugin :
immport { jUpProgress } from 'jeft-vue'
Vue.use(jUpProgress)

this.$process(10)
this.$process({
    status: 'success'
})
复制代码

props

参数	类型	默认值	描述
process	number	0	进度百分比
status	string	'hide'	'hide', 'pending', 'success', 'error', pending可以直接使用number传值
title	string	'pending' - 上传中，‘success'-上传成功， ‘error' - 上传失败	提示标题
text	string	''	error情况才会被展示，错误提示
duration	number	1500	success情况使用，成功之后延迟关闭弹窗

tips: popup属性皆可传递

demo1 - 成功

<j-button :style="{ marginBottom: '15px' }" @click="showProgress" round
        >上传成功</j-button
      >

showProgress() {
      let i = 0;
      let timer = setInterval(() => {
        this.$process(10 * i);
        i += 1;
        if (i == 10) {
          this.$process({
            status: "success",
          });
          clearInterval(timer);
        }
      }, 1000);
    }

demo2 - 失败报错

<j-button :style="{ marginBottom: '15px' }" @click="showProgressErr" round
        >上传失败</j-button >

    showProgressErr() {
      let i = 0;
      let timer = setInterval(() => {
        this.$process(10 * i);
        i += 1;
        if (i == 10) {
          this.$process({
            status: "error",
            text: "参数错误...",
          });
          clearInterval(timer);
        }
      }, 1000);
    }