static.lib.czyseed.progress.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of base4j-mvc Show documentation

The newest version!

Vue.component("progress-bar", {
    template: [
        '',
        '',
        '',
        ''
    ].join(''),
    data: function () {
        return {
            isShow: true, // 是否显示进度条
            val: 0, // 进度
        }
    },
    props: {
        /**
         * 每10毫秒自增幅度
         */
        step: {
            type: Number,
            default: 5,
        },
        /**
         * 初始值
         */
        initVal: {
            type: Number,
            default: 0,
        },
        /**
         * 到一定进度停止
         */
        stopVal: {
            type: Number,
            default: 80,
        },
        /**
         * 进度条继续到成功
         */
        isOk: {
            type: Boolean,
            default: false,
        },
    },
    mounted: function () {
        // 初始化后加载进度，加载到百分之多少由stopVal决定
        this.val = this.initVal;
        var step = this.step
        var timer = setInterval(function () {
            this.val = this.val + step
            this.$el.style.width = this.val + '%'

            // 父组件数据加载完前进度条最多到stopVal的这个百分值
            if (this.val >= this.stopVal) {
                clearInterval(timer)
                return
            }
        }, 10);
    },

})