| Vue3进度条（Progress） | 您所在的位置：网站首页 › bootstrap进度条圆形 › Vue3进度条（Progress） |
Vue3进度条（Progress）
|
Vue2进度条（Progress） 可自定义设置以下属性： 进度条总宽度（width），类型：number|string，默认 '100%' 当前进度百分比（percent），类型：number，默认 '0' 进度条的色彩，传入 string 时为纯色，传入 object 时为渐变，进度圈不支持渐变（strokeColor），类型：string | {'0%'?: string, '100%'?: string, from?: string, to?: string, direction?: 'left'|'right'}，默认 '#1677FF' 进度条线的宽度（strokeWidth），类型：number，单位px，默认 8 是否显示进度数值或状态图标（showInfo），类型：boolean，默认 true 进度条类型（type），类型：string，默认 'line'，可选 'line' 'circle' 效果如下图：在线预览
①创建进度条组件Progress.vue： import { computed } from 'vue' interface Gradient { '0%'?: string '100%'?: string from?: string to?: string direction?: 'right'|'left' } interface Props { width?: number|string // 进度条总宽度 percent?: number // 当前进度百分比 strokeColor?: string|Gradient // 进度条的色彩，传入 string 时为纯色，传入 object 时为渐变 strokeWidth?: number // 进度条线的宽度，单位px showInfo?: boolean // 是否显示进度数值或状态图标 type?: 'line'|'circle' // 进度条类型 } const props = withDefaults(defineProps(), { width: '100%', percent: 0, strokeColor: '#1677FF', strokeWidth: 8, showInfo: true, type: 'line' }) const totalWidth = computed(() => { // 进度条总宽度 if (typeof props.width === 'number') { return props.width + 'px' } else { return props.width } }) const perimeter = computed(() => { // 圆条周长 return (100 - props.strokeWidth) * Math.PI }) const path = computed(() => { // 圆条轨道路径指令 const long = (100 - props.strokeWidth) return `M 50,50 m 0,-${(long / 2)} a ${(long / 2)},${(long / 2)} 0 1 1 0,${long} a ${(long / 2)},${(long / 2)} 0 1 1 0,-${long}` }) const lineColor = computed(() => { if (typeof props.strokeColor === 'string') { return props.strokeColor } else { return `linear-gradient(to ${props.strokeColor.direction || 'right'}, ${props.strokeColor['0%'] || props.strokeColor.from}, ${props.strokeColor['100%'] || props.strokeColor.to})` } }){{ percent >= 100 ? 100 : percent }}% {{ percent >= 100 ? 100 : percent }}% .v-enter-active, .v-leave-active { transition: opacity 0.2s; } .v-enter-from, .v-leave-to { opacity: 0; } @success: #52C41A; .m-progress-line { display: flex; align-items: center; .m-progress-inner { width: 100%; background: #f5f5f5; border-radius: 100px; .u-progress-bg { position: relative; background-color: #1677ff; border-radius: 100px; transition: all .3s cubic-bezier(0.78, 0.14, 0.15, 0.86); &::after { content: ""; background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%); animation: progressRipple 2s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes progressRipple { 0% { position: absolute; inset: 0; right: 100%; opacity: 1; } 66% { position: absolute; inset: 0; opacity: 0; } 100% { position: absolute; inset: 0; opacity: 0; } } } .u-success-bg { background: @success !important; } } .m-success { width: 40px; text-align: center; display: inline-flex; align-items: center; justify-content: center; padding-left: 4px; flex-shrink: 0; // 默认 1.即空间不足时，项目将缩小 .u-icon { display: inline-block; width: 16px; height: 16px; fill: @success; } } .u-progress-text { /* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 */ flex-shrink: 0; // 默认 1.即空间不足时，项目将缩小 width: 40px; text-align: center; font-size: 14px; padding-left: 4px; color: rgba(0, 0, 0, .88); } } .m-progress-circle { display: inline-block; position: relative; .u-progress-circle { .u-progress-circle-trail { stroke: #f5f5f5; stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s ease 0s, stroke-width .06s ease .3s, opacity .3s ease 0s; } .u-progress-circle-path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s ease 0s, stroke-width .06s ease .3s, opacity .3s ease 0s; } .success { stroke: @success !important; } } .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: 30px; height: 30px; fill: @success; } .u-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 27px; line-height: 1; text-align: center; color: rgba(0, 0, 0, .85); } }②在要使用的页面引入： import Progress from './Progress.vue' import { ref } from 'vue' const percent = ref(60) function onIncrease (scale: number) { const res = percent.value + scale if (res > 100) { percent.value = 100 } else { percent.value = res } } function onDecline (scale: number) { const res = percent.value - scale if (res < 0) { percent.value = 0 } else { percent.value = res } } console.log(Math.PI) Progress 进度条 基本使用 (width: 900 & type: line) 完成进度条 (width: 100% & percent: 100) 渐变进度条 (width: 900) strokeColor: { '0%': '#108ee9', '100%': '#87d068', direction: 'right' } 或 { from: '#108ee9', to: '#87d068', direction: 'right' } 进度圈基本使用 (type: circle) Decline- Increase+ Ant Design Vue 进度圈 |
【本文地址】
公司简介
联系我们