77 lines
2.2 KiB
Vue
77 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div :class="classes" :style="outerStyles" v-show="show" transition="fade">
|
||
|
|
<div :class="innerClasses" :style="styles"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { oneOf } from '../../utils/assist';
|
||
|
|
|
||
|
|
const prefixCls = 'ivu-loading-bar';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
percent: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: 'primary'
|
||
|
|
},
|
||
|
|
failedColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'error'
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
default: 2
|
||
|
|
},
|
||
|
|
status: {
|
||
|
|
type: String,
|
||
|
|
validator (value) {
|
||
|
|
return oneOf(value, ['success', 'error']);
|
||
|
|
},
|
||
|
|
default: 'success'
|
||
|
|
},
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
classes () {
|
||
|
|
return `${prefixCls}`;
|
||
|
|
},
|
||
|
|
innerClasses () {
|
||
|
|
return [
|
||
|
|
`${prefixCls}-inner`,
|
||
|
|
{
|
||
|
|
[`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
|
||
|
|
[`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
outerStyles () {
|
||
|
|
return {
|
||
|
|
height: `${this.height}px`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
styles () {
|
||
|
|
let style = {
|
||
|
|
width: `${this.percent}%`,
|
||
|
|
height: `${this.height}px`
|
||
|
|
};
|
||
|
|
|
||
|
|
if (this.color !== 'primary' && this.status === 'success') {
|
||
|
|
style.backgroundColor = this.color;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.failedColor !== 'error' && this.status === 'error') {
|
||
|
|
style.backgroundColor = this.failedColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
return style;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|