40 lines
856 B
Vue
40 lines
856 B
Vue
<template>
|
|
<view v-if="Math.min(progress, 100) !== 100 || error" class="progressWrapper" :style="{ height: height, backgroundColor: backgroundColor }">
|
|
<view v-if="!error" class="progressBar" :style="{ width: `${Math.min(progress, 100)}%`, backgroundColor: activeColor }"></view>
|
|
<view v-else class="progressBar error"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Progress',
|
|
props: {
|
|
progress: {
|
|
type: Number,
|
|
required: false,
|
|
default: 100
|
|
},
|
|
error: { type: Boolean, required: false, default: false },
|
|
height: {
|
|
type: String,
|
|
required: false,
|
|
default: '2px'
|
|
},
|
|
activeColor: {
|
|
type: String,
|
|
required: false,
|
|
default: '#29BBE4'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
required: false,
|
|
default: '#EBEBEB'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|