1. Progress進度條

1.1. Progress進度條, 用于展示操作進度, 告知用戶當前狀態和預期。

1.2. Attributes

參數	說明	類型	可選值	默認值
percentage	百分比(必填)	number	0-100	0
type	進度條類型	string	line/circle/dashboard	line
stroke-width	進度條的寬度, 單位px	number	無	6
text-inside	進度條顯示文字內置在進度條內(只在type=line時可用)	boolean	無	false
status	進度條當前狀態	string	success/exception/warning	無
color	進度條背景色(會覆蓋status狀態顏色)	string/function/array	無	''
width	環形進度條畫布寬度(只在type為circle或dashboard時可用)	number	無	126
show-text	是否顯示進度條文字內容	boolean	無	true
stroke-linecap	circle/dashboard類型路徑兩端的形狀	string	butt/round/square	round
format	指定進度條文字內容	function(percentage)	無	無

2. Progress進度條例子

2.1. 使用腳手架新建一個名為element-ui-progress的前端項目, 同時安裝Element插件。

2.2. 編寫index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Progress from '../components/Progress.vue' import ColorProgress from '../components/ColorProgress.vue' import DashboardProgress from '../components/DashboardProgress.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Progress' },{ path: '/Progress', component: Progress },{ path: '/ColorProgress', component: ColorProgress },{ path: '/DashboardProgress', component: DashboardProgress } ]const router = new VueRouter({routes })export default router

2.3. 在components在新建Progress.vue

<template><div><h1>線形進度條</h1><h4>Progress組件設置percentage屬性即可, 表示進度條對應的百分比, 必填, 必須在0-100。通過format屬性來指定進度條文字內容。</h4><el-progress :percentage="50"></el-progress><el-progress :percentage="100" :format="format"></el-progress><el-progress :percentage="100" status="success"></el-progress><el-progress :percentage="100" status="warning"></el-progress><el-progress :percentage="50" status="exception"></el-progress><h1>百分比內顯-百分比不占用額外控件, 適用于文件上傳等場景</h1><h4>Progress組件可通過stroke-width屬性更改進度條的高度, 并可通過text-inside屬性來將進度條描述置于進度條內部。</h4><el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress><el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress><el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress><el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress><h1>環形進度條</h1><h4>Progress組件可通過type屬性來指定使用環形進度條, 在環形進度條中, 還可以通過width屬性來設置其大小。</h4><el-progress type="circle" :percentage="0"></el-progress><el-progress type="circle" :percentage="25"></el-progress><el-progress type="circle" :percentage="100" status="success"></el-progress><el-progress type="circle" :percentage="70" status="warning"></el-progress><el-progress type="circle" :percentage="50" status="exception"></el-progress></div> </template><script> export default {methods: {format (percentage) {return percentage === 100 ? '滿' : `${percentage}%`}} } </script><style scoped> .el-progress + .el-progress {margin-top: 20px; } .el-progress--circle + .el-progress--circle {margin-left: 20px; } </style>

2.4. 在components在新建ColorProgress.vue

<template><div><h1>自定義顏色</h1><h4>可以通過color設置進度條的顏色, color可以接受顏色字符串, 函數和數組。</h4><el-progress :percentage="percentage" :color="customColor"></el-progress><el-progress :percentage="percentage" :color="customColorMethod"></el-progress><el-progress :percentage="percentage" :color="customColors"></el-progress><div><el-button-group><el-button icon="el-icon-minus" @click="decrease"></el-button><el-button icon="el-icon-plus" @click="increase"></el-button></el-button-group></div></div> </template><script> export default {data () {return {percentage: 20,customColor: '#409eff',customColors: [{ color: '#f56c6c', percentage: 20 },{ color: '#e6a23c', percentage: 40 },{ color: '#5cb87a', percentage: 60 },{ color: '#1989fa', percentage: 80 },{ color: '#6f7ad3', percentage: 100 }]}},methods: {customColorMethod (percentage) {if (percentage < 30) {return '#909399'} else if (percentage < 70) {return '#e6a23c'} else {return '#67c23a'}},increase () {this.percentage += 10if (this.percentage > 100) {this.percentage = 100}},decrease () {this.percentage -= 10if (this.percentage < 0) {this.percentage = 0}}} } </script><style scoped> .el-progress + .el-progress {margin-top: 20px; } </style>

2.5. 在components在新建DashboardProgress.vue

<template><div><h1>儀表盤形進度條</h1><h4>通過type屬性來指定使用儀表盤形進度條。</h4><el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress><div><el-button-group><el-button icon="el-icon-minus" @click="decrease"></el-button><el-button icon="el-icon-plus" @click="increase"></el-button></el-button-group></div></div> </template><script> export default {data () {return {percentage: 10,colors: [{ color: '#f56c6c', percentage: 20 },{ color: '#e6a23c', percentage: 40 },{ color: '#5cb87a', percentage: 60 },{ color: '#1989fa', percentage: 80 },{ color: '#6f7ad3', percentage: 100 }]}},methods: {increase () {this.percentage += 10if (this.percentage > 100) {this.percentage = 100}},decrease () {this.percentage -= 10if (this.percentage < 0) {this.percentage = 0}}} } </script>

2.6. 訪問http://localhost:8080/#/Progress

2.7. 訪問http://localhost:8080/#/ColorProgress?

2.8. 訪問http://localhost:8080/#/DashboardProgress?

總結

以上是生活随笔為你收集整理的024_Progress进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。