68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<div ref="progress" class="custom-progress-val" :style="{ background: inactiveBg }">
|
|
<div class="progress-warp" :style="{ height: height }">
|
|
<div class="progress" :style="{ height: height, width: pWidth + 'px', background: activateBg }"></div>
|
|
</div>
|
|
{{ width }}
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, watch, reactive, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
height: {
|
|
type: String,
|
|
default: '10px',
|
|
},
|
|
inactiveBg: {
|
|
type: String,
|
|
default: 'transparent',
|
|
},
|
|
activateBg: {
|
|
type: String,
|
|
default: 'linear-gradient(90deg, #45bfe9 0%, #01589c 100%)',
|
|
},
|
|
percent: {
|
|
type: Number,
|
|
default: 20,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
let progress = ref(null);
|
|
let maxwidth = computed(() => {
|
|
return progress.value && progress.value.clientWidth;
|
|
});
|
|
let pWidth = computed(() => {
|
|
let num = 0;
|
|
num = Number(((maxwidth.value * props.percent) / 100).toFixed(0));
|
|
return num;
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.custom-progress-val {
|
|
width: calc(100%);
|
|
border-radius: 6px;
|
|
.progress-warp {
|
|
width: 100%;
|
|
.progress {
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
animation: expandWidth 1s ease-in-out forwards;
|
|
}
|
|
|
|
@keyframes expandWidth {
|
|
from {
|
|
width: 0;
|
|
}
|
|
to {
|
|
width: maxwidth + 'px';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|