121 lines
No EOL
3.4 KiB
Vue
121 lines
No EOL
3.4 KiB
Vue
<template>
|
|
<div :class="wrapClasses">
|
|
<span v-if="!hideInfo" :class="textClasses">
|
|
<slot>
|
|
<span v-if="isStatus" :class="textInnerClasses">
|
|
<Icon :type="statusIcon"></Icon>
|
|
</span>
|
|
<span v-else :class="textInnerClasses">
|
|
{{ percent }}%
|
|
</span>
|
|
</slot>
|
|
</span>
|
|
<div :class="outerClasses">
|
|
<div :class="innerClasses">
|
|
<div :class="bgClasses" :style="bgStyle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Icon from '../icon';
|
|
import { oneOf } from '../../utils/assist';
|
|
|
|
const prefixCls = 'ivu-progress';
|
|
|
|
export default {
|
|
components: { Icon },
|
|
props: {
|
|
percent: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
status: {
|
|
validator (value) {
|
|
return oneOf(value, ['normal', 'active', 'wrong', 'success']);
|
|
},
|
|
default: 'normal'
|
|
},
|
|
hideInfo: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 10
|
|
}
|
|
},
|
|
computed: {
|
|
isStatus () {
|
|
return this.status == 'wrong' || this.status == 'success';
|
|
},
|
|
statusIcon () {
|
|
let type = '';
|
|
switch (this.status) {
|
|
case 'wrong':
|
|
type = 'ios-close-empty';
|
|
break;
|
|
case 'success':
|
|
type = 'ios-checkmark-empty';
|
|
break;
|
|
}
|
|
|
|
return type;
|
|
},
|
|
bgStyle () {
|
|
return {
|
|
width: `${this.percent}%`,
|
|
height: `${this.strokeWidth}px`
|
|
}
|
|
},
|
|
wrapClasses () {
|
|
return [
|
|
`${prefixCls}`,
|
|
`${prefixCls}-${this.status}`,
|
|
{
|
|
[`${prefixCls}-show-info`]: !this.hideInfo,
|
|
|
|
}
|
|
]
|
|
},
|
|
textClasses () {
|
|
return `${prefixCls}-text`;
|
|
},
|
|
textInnerClasses () {
|
|
return `${prefixCls}-text-inner`;
|
|
},
|
|
outerClasses () {
|
|
return `${prefixCls}-outer`;
|
|
},
|
|
innerClasses () {
|
|
return `${prefixCls}-inner`;
|
|
},
|
|
bgClasses () {
|
|
return `${prefixCls}-bg`;
|
|
}
|
|
},
|
|
compiled () {
|
|
this.handleStatus();
|
|
},
|
|
methods: {
|
|
handleStatus (isDown) {
|
|
if (isDown) {
|
|
this.status = 'normal';
|
|
} else {
|
|
if (parseInt(this.percent, 10) == 100) {
|
|
this.status = 'success';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
percent (val, oldVal) {
|
|
if (val < oldVal) {
|
|
this.handleStatus(true);
|
|
} else {
|
|
this.handleStatus();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |