37 lines
643 B
Vue
37 lines
643 B
Vue
<template>
|
|
<div :class="[cn.b(), cn.m(type)]">
|
|
<div
|
|
:class="cn.e('bar')"
|
|
:style="{ width: `${progress}%` }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({
|
|
name: 'UiProgressBar',
|
|
})
|
|
|
|
const props = withDefaults(defineProps<ProgressBarProps>(), {
|
|
progress: 0,
|
|
})
|
|
|
|
export interface ProgressBarProps {
|
|
progress: number
|
|
}
|
|
|
|
const cn = useClassname('ui-progress-bar')
|
|
const type = computed(() => {
|
|
if (props.progress <= 75)
|
|
return 'normal'
|
|
else if (props.progress > 75 && props.progress < 95)
|
|
return 'middle'
|
|
else
|
|
return 'high'
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use 'styles';
|
|
</style>
|