度條（Progress）)
Vue2進(jìn)度條Progress可自定義設(shè)置以下屬性進(jìn)度條寬度width單位 px類型string | number默認(rèn) undefinedtype: line 時為進(jìn)度條寬度默認(rèn)值 100%type: circle 時為進(jìn)度圈寬高默認(rèn)值 120當(dāng)前進(jìn)度百分比percent類型number默認(rèn) 0進(jìn)度條的尺寸lineSize單位 px類型number默認(rèn) undefinedtype: line 時為進(jìn)度條線高默認(rèn)值 8type: circle 時單位是進(jìn)度圈畫布寬度的百分比默認(rèn)值 6進(jìn)度條的色彩lineColor類型string | {0%?: string, 100%?: string, from?: string, to?: string, direction?: left|right}默認(rèn) undefined傳入 string 時為純色傳入 object 時為漸變進(jìn)度圈時 direction: left 為逆時針direction: right 為順時針進(jìn)度條邊緣的形狀lineCap類型round | square默認(rèn) round是否顯示進(jìn)度數(shù)值或狀態(tài)圖標(biāo)showInfo類型boolean默認(rèn) true進(jìn)度數(shù)值或狀態(tài)圖標(biāo)的尺寸infoSize單位 px類型number默認(rèn) undefinedtype: line 時默認(rèn)值 14type: circle 時默認(rèn)值 undefined進(jìn)度完成時的信息success類型string | slot默認(rèn) undefined內(nèi)容的模板函數(shù)format類型(percent: number) (string | number) | slot默認(rèn)(percent: number) percent %進(jìn)度條類型type類型line | circle默認(rèn) line效果如下圖在線預(yù)覽①創(chuàng)建進(jìn)度條組件Progress.vue其中引入使用了以下工具函數(shù)監(jiān)聽插槽存在 useSlotsExist獲取依賴注入 useInjectscript setup langts import { computed } from vue import { useSlotsExist, useInject } from components/utils export interface Gradient { 0%?: string 100%?: string from?: string to?: string direction?: left | right // 默認(rèn) right } export interface Props { width?: number | string // 進(jìn)度條寬度單位 pxtype: line 時為進(jìn)度條寬度默認(rèn)值 100%type: circle 時為進(jìn)度圈寬高默認(rèn)值 120 percent?: number // 當(dāng)前進(jìn)度百分比 lineSize?: number // 進(jìn)度條的尺寸單位 pxtype: line 時為進(jìn)度條線高默認(rèn)值 8type: circle 時單位是進(jìn)度圈畫布寬度的百分比默認(rèn)值 6 lineColor?: string | Gradient // 進(jìn)度條的色彩傳入 string 時為純色傳入 Gradient 時為漸變進(jìn)度圈時 direction: left 為逆時針direction: right 為順時針 lineCap?: round | butt // 進(jìn)度條邊緣的形狀 showInfo?: boolean // 是否顯示進(jìn)度數(shù)值或狀態(tài)圖標(biāo) infoSize?: number // 進(jìn)度數(shù)值或狀態(tài)圖標(biāo)的尺寸單位 pxtype: line 時默認(rèn)值 14type: circle 時默認(rèn)值 24 success?: string // 進(jìn)度完成時的信息 string | slot format?: (percent: number) string | number // 內(nèi)容的模板函數(shù) function | slot type?: line | circle // 進(jìn)度條類型 } const props withDefaults(definePropsProps(), { width: undefined, percent: 0, lineSize: undefined, lineColor: undefined, lineCap: round, showInfo: true, infoSize: undefined, success: undefined, format: (percent: number) percent %, type: line }) const { colorPalettes } useInject(Progress) // 主題色注入 const slotsExist useSlotsExist([success]) // 進(jìn)度條寬度/進(jìn)度圈寬高 const progressSize computed(() { if (props.width undefined) { if (props.type line) { return 100% } if (props.type circle) { return 120px } } return typeof props.width number ? ${props.width}px : props.width }) // 進(jìn)度條高度進(jìn)度圈線寬 const progressLineSize computed(() { if (props.lineSize undefined) { if (props.type line) { return 8 } if (props.type circle) { return 6 } } return props.lineSize as number }) // 進(jìn)度條/圈進(jìn)度數(shù)值或狀態(tài)圖標(biāo)尺寸 const progressInfoSize computed(() { if (props.infoSize undefined) { if (props.type line) { return 14px } if (props.type circle) { return 24px } } return ${props.infoSize}px }) // 圓條周長 const perimeter computed(() { return (100 - progressLineSize.value) * Math.PI }) // 圓條軌道路徑指令 const path computed(() { const long 100 - progressLineSize.value 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 isGradientColor computed(() { if (props.lineColor ! undefined typeof props.lineColor ! string) { return true } return false }) // 進(jìn)度條/圈顏色 const lineColorComputed computed(() { if (props.lineColor undefined) { return colorPalettes.value[5] } else if (typeof props.lineColor string) { return props.lineColor } else { return linear-gradient(to ${props.lineColor.direction || right}, ${props.lineColor[0%] || props.lineColor.from}, ${props.lineColor[100%] || props.lineColor.to}) } }) // 進(jìn)度圈漸變色 id const circleGradient computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (gradientColor.direction undefined || gradientColor.direction right) { return right-${gradientColor[0%] || gradientColor.from}-${gradientColor[100%] || gradientColor.to} } return left-${gradientColor[100%] || gradientColor.to}-${gradientColor[0%] || gradientColor.from} } return null }) const circleColorFrom computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (gradientColor.direction undefined || gradientColor.direction right) { return gradientColor[0%] || gradientColor.from } else { return gradientColor[100%] || gradientColor.to } } return }) const circleColorTo computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (!gradientColor.direction || gradientColor.direction right) { return gradientColor[100%] || gradientColor.to } else { return gradientColor[0%] || gradientColor.from } } return }) const showPercent computed(() { return props.format(props.percent 100 ? 100 : props.percent) }) const showSuccess computed(() { return slotsExist.success || props.success }) /script template div v-iftype line classprogress-line-wrap :style --progress-size: ${progressSize}; --progress-primary-color: ${lineColorComputed}; --progress-success-color: #52c41a; --progress-font-size: ${progressInfoSize}; --progress-border-radius: ${lineCap round ? 100px : 0}; div classprogress-inner div :class[progress-bg, { line-success: percent 100 !isGradientColor }] :stylewidth: ${percent 100 ? 100 : percent}%; height: ${progressLineSize}px; /div /div template v-ifshowInfo Transition namefade modeout-in span v-ifpercent 100 classprogress-success svg v-ifshowSuccess undefined classicon-svg focusablefalse >script setup langts import Progress from ./Progress.vue import { ref } from vue import { MinusOutlined, PlusOutlined } from ant-design/icons-vue import type { ProgressProps } from vue-amazing-ui const percent ref(80) const lineCapOptions [ { label: round, value: round }, { label: butt, value: butt } ] const lineCap refProgressProps[lineCap](butt) 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 } } /script template div stylewidth: 900px h1{{ $route.name }} {{ $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 Progress :percentpercent / h2 classmt30 mb10進(jìn)度圈/h2 Space aligncenter Progress typecircle :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space h2 classmt30 mb10完成進(jìn)度條/h2 Flex vertical Progress :percent100 / Progress typecircle :percent100 / /Flex h2 classmt30漸變進(jìn)度條/h2 h3 classmb10 strokeColor: { 0%: #108ee9, 100%: #87d068, direction: right } 或 { from: #108ee9, to: #87d068, direction: right } /h3 Flex vertical Progress :line-color{ 0%: #108ee9, 100%: #87d068 } :percentpercent / Space aligncenter Progress typecircle :line-color{ 0%: #108ee9, 100%: #87d068 } :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義樣式/h2 Flex vertical Progress style--progress-success-color: #ff6900 :line-size24 :line-color{ 0%: #108ee9, 100%: #87d068, direction: left } :info-size24 :percentpercent / Space aligncenter Progress style--progress-success-color: #ff6900 typecircle :width180 :line-size14 :line-color{ 0%: #108ee9, 100%: #87d068, direction: left } :info-size28 :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義邊緣形狀/h2 Flex vertical Radio :optionslineCapOptions v-model:valuelineCap button button-stylesolid / Progress :line-size20 :line-color{ 0%: white, 100%: pink } :line-caplineCap :info-size20 :percentpercent / Space aligncenter Progress typecircle :width160 :line-size12 :line-color{ 0%: #e3f2fd, 100%: #2080f0 } :line-caplineCap :info-size24 :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義文字/h2 Flex vertical Progress :line-size20 :info-size20 :percentpercent :format(percent: number) $${percent} successDone / Progress style--success-color: #d48806 :line-size20 :info-size20 :percentpercent template #format{ percent } span stylecolor: #d4380d{{ percent }}%/span /template template #success span stylecolor: #d48806Bingo/span /template /Progress Space aligncenter Progress typecircle :width160 :line-size12 :info-size24 :percentpercent :format(percent: number) ${percent} Days successDone / Progress style--success-color: #d48806 typecircle :width160 :line-size12 :info-size24 :percentpercent template #format{ percent } span stylecolor: #d4380d{{ percent }}%/span /template template #success span stylecolor: #d48806Bingo/span /template /Progress Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex /div /template Vue3進(jìn)度條（Progress）
Vue2進(jìn)度條Progress可自定義設(shè)置以下屬性進(jìn)度條寬度width單位 px類型string | number默認(rèn) undefinedtype: line 時為進(jìn)度條寬度默認(rèn)值 100%type: circle 時為進(jìn)度圈寬高默認(rèn)值 120當(dāng)前進(jìn)度百分比percent類型number默認(rèn) 0進(jìn)度條的尺寸lineSize單位 px類型number默認(rèn) undefinedtype: line 時為進(jìn)度條線高默認(rèn)值 8type: circle 時單位是進(jìn)度圈畫布寬度的百分比默認(rèn)值 6進(jìn)度條的色彩lineColor類型string | {0%?: string, 100%?: string, from?: string, to?: string, direction?: left|right}默認(rèn) undefined傳入 string 時為純色傳入 object 時為漸變進(jìn)度圈時 direction: left 為逆時針direction: right 為順時針進(jìn)度條邊緣的形狀lineCap類型round | square默認(rèn) round是否顯示進(jìn)度數(shù)值或狀態(tài)圖標(biāo)showInfo類型boolean默認(rèn) true進(jìn)度數(shù)值或狀態(tài)圖標(biāo)的尺寸infoSize單位 px類型number默認(rèn) undefinedtype: line 時默認(rèn)值 14type: circle 時默認(rèn)值 undefined進(jìn)度完成時的信息success類型string | slot默認(rèn) undefined內(nèi)容的模板函數(shù)format類型(percent: number) (string | number) | slot默認(rèn)(percent: number) percent %進(jìn)度條類型type類型line | circle默認(rèn) line效果如下圖在線預(yù)覽①創(chuàng)建進(jìn)度條組件Progress.vue其中引入使用了以下工具函數(shù)監(jiān)聽插槽存在 useSlotsExist獲取依賴注入 useInjectscript setup langts import { computed } from vue import { useSlotsExist, useInject } from components/utils export interface Gradient { 0%?: string 100%?: string from?: string to?: string direction?: left | right // 默認(rèn) right } export interface Props { width?: number | string // 進(jìn)度條寬度單位 pxtype: line 時為進(jìn)度條寬度默認(rèn)值 100%type: circle 時為進(jìn)度圈寬高默認(rèn)值 120 percent?: number // 當(dāng)前進(jìn)度百分比 lineSize?: number // 進(jìn)度條的尺寸單位 pxtype: line 時為進(jìn)度條線高默認(rèn)值 8type: circle 時單位是進(jìn)度圈畫布寬度的百分比默認(rèn)值 6 lineColor?: string | Gradient // 進(jìn)度條的色彩傳入 string 時為純色傳入 Gradient 時為漸變進(jìn)度圈時 direction: left 為逆時針direction: right 為順時針 lineCap?: round | butt // 進(jìn)度條邊緣的形狀 showInfo?: boolean // 是否顯示進(jìn)度數(shù)值或狀態(tài)圖標(biāo) infoSize?: number // 進(jìn)度數(shù)值或狀態(tài)圖標(biāo)的尺寸單位 pxtype: line 時默認(rèn)值 14type: circle 時默認(rèn)值 24 success?: string // 進(jìn)度完成時的信息 string | slot format?: (percent: number) string | number // 內(nèi)容的模板函數(shù) function | slot type?: line | circle // 進(jìn)度條類型 } const props withDefaults(definePropsProps(), { width: undefined, percent: 0, lineSize: undefined, lineColor: undefined, lineCap: round, showInfo: true, infoSize: undefined, success: undefined, format: (percent: number) percent %, type: line }) const { colorPalettes } useInject(Progress) // 主題色注入 const slotsExist useSlotsExist([success]) // 進(jìn)度條寬度/進(jìn)度圈寬高 const progressSize computed(() { if (props.width undefined) { if (props.type line) { return 100% } if (props.type circle) { return 120px } } return typeof props.width number ? ${props.width}px : props.width }) // 進(jìn)度條高度進(jìn)度圈線寬 const progressLineSize computed(() { if (props.lineSize undefined) { if (props.type line) { return 8 } if (props.type circle) { return 6 } } return props.lineSize as number }) // 進(jìn)度條/圈進(jìn)度數(shù)值或狀態(tài)圖標(biāo)尺寸 const progressInfoSize computed(() { if (props.infoSize undefined) { if (props.type line) { return 14px } if (props.type circle) { return 24px } } return ${props.infoSize}px }) // 圓條周長 const perimeter computed(() { return (100 - progressLineSize.value) * Math.PI }) // 圓條軌道路徑指令 const path computed(() { const long 100 - progressLineSize.value 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 isGradientColor computed(() { if (props.lineColor ! undefined typeof props.lineColor ! string) { return true } return false }) // 進(jìn)度條/圈顏色 const lineColorComputed computed(() { if (props.lineColor undefined) { return colorPalettes.value[5] } else if (typeof props.lineColor string) { return props.lineColor } else { return linear-gradient(to ${props.lineColor.direction || right}, ${props.lineColor[0%] || props.lineColor.from}, ${props.lineColor[100%] || props.lineColor.to}) } }) // 進(jìn)度圈漸變色 id const circleGradient computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (gradientColor.direction undefined || gradientColor.direction right) { return right-${gradientColor[0%] || gradientColor.from}-${gradientColor[100%] || gradientColor.to} } return left-${gradientColor[100%] || gradientColor.to}-${gradientColor[0%] || gradientColor.from} } return null }) const circleColorFrom computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (gradientColor.direction undefined || gradientColor.direction right) { return gradientColor[0%] || gradientColor.from } else { return gradientColor[100%] || gradientColor.to } } return }) const circleColorTo computed(() { if (isGradientColor.value) { const gradientColor props.lineColor as Gradient if (!gradientColor.direction || gradientColor.direction right) { return gradientColor[100%] || gradientColor.to } else { return gradientColor[0%] || gradientColor.from } } return }) const showPercent computed(() { return props.format(props.percent 100 ? 100 : props.percent) }) const showSuccess computed(() { return slotsExist.success || props.success }) /script template div v-iftype line classprogress-line-wrap :style --progress-size: ${progressSize}; --progress-primary-color: ${lineColorComputed}; --progress-success-color: #52c41a; --progress-font-size: ${progressInfoSize}; --progress-border-radius: ${lineCap round ? 100px : 0}; div classprogress-inner div :class[progress-bg, { line-success: percent 100 !isGradientColor }] :stylewidth: ${percent 100 ? 100 : percent}%; height: ${progressLineSize}px; /div /div template v-ifshowInfo Transition namefade modeout-in span v-ifpercent 100 classprogress-success svg v-ifshowSuccess undefined classicon-svg focusablefalse >script setup langts import Progress from ./Progress.vue import { ref } from vue import { MinusOutlined, PlusOutlined } from ant-design/icons-vue import type { ProgressProps } from vue-amazing-ui const percent ref(80) const lineCapOptions [ { label: round, value: round }, { label: butt, value: butt } ] const lineCap refProgressProps[lineCap](butt) 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 } } /script template div stylewidth: 900px h1{{ $route.name }} {{ $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 Progress :percentpercent / h2 classmt30 mb10進(jìn)度圈/h2 Space aligncenter Progress typecircle :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space h2 classmt30 mb10完成進(jìn)度條/h2 Flex vertical Progress :percent100 / Progress typecircle :percent100 / /Flex h2 classmt30漸變進(jìn)度條/h2 h3 classmb10 strokeColor: { 0%: #108ee9, 100%: #87d068, direction: right } 或 { from: #108ee9, to: #87d068, direction: right } /h3 Flex vertical Progress :line-color{ 0%: #108ee9, 100%: #87d068 } :percentpercent / Space aligncenter Progress typecircle :line-color{ 0%: #108ee9, 100%: #87d068 } :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義樣式/h2 Flex vertical Progress style--progress-success-color: #ff6900 :line-size24 :line-color{ 0%: #108ee9, 100%: #87d068, direction: left } :info-size24 :percentpercent / Space aligncenter Progress style--progress-success-color: #ff6900 typecircle :width180 :line-size14 :line-color{ 0%: #108ee9, 100%: #87d068, direction: left } :info-size28 :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義邊緣形狀/h2 Flex vertical Radio :optionslineCapOptions v-model:valuelineCap button button-stylesolid / Progress :line-size20 :line-color{ 0%: white, 100%: pink } :line-caplineCap :info-size20 :percentpercent / Space aligncenter Progress typecircle :width160 :line-size12 :line-color{ 0%: #e3f2fd, 100%: #2080f0 } :line-caplineCap :info-size24 :percentpercent / Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex h2 classmt30 mb10自定義文字/h2 Flex vertical Progress :line-size20 :info-size20 :percentpercent :format(percent: number) $${percent} successDone / Progress style--success-color: #d48806 :line-size20 :info-size20 :percentpercent template #format{ percent } span stylecolor: #d4380d{{ percent }}%/span /template template #success span stylecolor: #d48806Bingo/span /template /Progress Space aligncenter Progress typecircle :width160 :line-size12 :info-size24 :percentpercent :format(percent: number) ${percent} Days successDone / Progress style--success-color: #d48806 typecircle :width160 :line-size12 :info-size24 :percentpercent template #format{ percent } span stylecolor: #d4380d{{ percent }}%/span /template template #success span stylecolor: #d48806Bingo/span /template /Progress Button clickonDecline(5) sizelarge :iconMinusOutlinedDecline/Button Button clickonIncrease(5) sizelarge :iconPlusOutlinedIncrease/Button /Space /Flex /div /template