You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.7 KiB
78 lines
1.7 KiB
<template>
|
|
<div class="progress-lite">
|
|
<!-- 假性进度条组件 -->
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
title="上传中"
|
|
width="500"
|
|
:show-close="false"
|
|
>
|
|
<div class="demo-progress">
|
|
<template v-if="props.progressType.type1">
|
|
<el-progress
|
|
:percentage="percentage"
|
|
:stroke-width="22"
|
|
striped
|
|
:status="status"
|
|
:duration="80"
|
|
striped-flow
|
|
:text-inside="true"
|
|
/>
|
|
</template>
|
|
<template v-if="props.progressType.type2">
|
|
<el-progress
|
|
:percentage="percentage"
|
|
:indeterminate="true"
|
|
:status="status"
|
|
:stroke-width="16"
|
|
/>
|
|
</template>
|
|
<template v-if="props.progressType.type3"
|
|
><el-progress
|
|
type="dashboard"
|
|
:percentage="percentage"
|
|
:status="status"
|
|
>
|
|
<template #default="{ percentage }">
|
|
<span class="percentage-value">{{ percentage }}%</span>
|
|
</template>
|
|
</el-progress></template
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useProgress } from '@/hooks/progress'
|
|
const props = defineProps({
|
|
// 进度条类型
|
|
progressType: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
type1: true,
|
|
type2: false,
|
|
type3: false
|
|
}
|
|
}
|
|
}
|
|
})
|
|
const {
|
|
percentage,
|
|
status,
|
|
dialogVisible,
|
|
changePercentage,
|
|
offProgress,
|
|
openProgress
|
|
} = useProgress()
|
|
|
|
defineExpose({
|
|
changePercentage,
|
|
offProgress,
|
|
openProgress
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|