12.4 弧形进度条
#midea-progresscycle-view 环形进度条
APP内置组件，功能由原生实现，无需引入H5组件。
#实例:
#基础用法
<template>
<div class="wrapper">
<dof-minibar
title="progresscycle"
background-color="#0092d7"
text-color="#ffffff"
:isImage="true"
:left-button="leftButton"
right-text="Home"
></dof-minibar>
<scroller class="scroller">
<div class="progresscycle-wrapper">
<midea-progresscycle-view v-if="isShow" class="progresscycle" :data="chartData"></midea-progresscycle-view>
</div>
<div class="param-wrapper">
<div class="item-group">
<text class="text-label">起始角度:</text>
<input class="text-input" type="text" placeholder="起始角度" v-model="chartData.startingSlice" />
</div>
<div class="item-group">
<text class="text-label">总进度:</text>
<input class="text-input" type="text" placeholder="总进度" v-model="chartData.totalCounter" />
</div>
<div class="item-group">
<text class="text-label">步长:</text>
<input class="text-input" type="text" placeholder="步长" v-model="step" />
</div>
</div>
<div class="btn-wrapper">
<dof-button
:text="(intervalHandler?'停止':'开始')+'增加进度（步长/秒）'"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="增加进度"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked1">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="重新加载"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked2">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="清零"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked3">
</dof-button>
</div>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-image: linear-gradient(to bottom, #ffbb00, #ffaa10);
}
.scroller {
padding-bottom: 50px;
}
.progresscycle-wrapper {
width: 750px;
justify-content: center;
align-items: center;
/* border-color: red;
border-width: 1px; */
padding: 20px;
}
.progresscycle {
width: 480px;
height: 480px;
justify-content: center;
align-items: center;
}
.param-wrapper {
width: 750px;
padding-top: 32px;
padding-left: 32px;
padding-right: 32px;
background-image: linear-gradient(to bottom, #ffbb00, #ffaa10);
}
.item-group {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
.text-label {
font-family: PingFangSC-Regular;
font-size: 28px;
color: #000000;
width: 150px;
padding-top: 16px;
margin-bottom: 16px;
padding-right: 20px;
text-align: right;
}
.text-input {
flex: 1;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #000000;
border-radius: 4px;
border-color: #e5e5e8;
border-width: 1px;
/* height: 72px; */
padding-top: 16px;
padding-left: 22px;
padding-right: 50px;
padding-bottom: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.btn-wrapper {
margin-bottom: 20px;
width: 750px;
align-items: center;
}
</style>
<script>
import { DofMinibar, DofButton} from 'dolphin-weex-ui'
export default {
components: {DofMinibar, DofButton },
data: () => ({
isShow: true,
intervalHandler: null,
step: 5,
chartData: {
"completedColor": "#eeffffff", //环形进度条未完成后的颜色默认#267AFF
"incompletedColor": "#eef5d5d5", //环形进度条未完成后的颜色，默认透明
"thickness": 6, //环形进度条宽度，默认4
"cornerRadius": 240, //环形的半径，默认是width/2
"totalCounter": 360, //环形进度条的最大值，默认是360
"progressCounter": 0, //设置进度值，默认是从0-360, 默认为0
"autoProgress": false, //设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
"clockwise": true, //环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
"startingSlice": 180, //环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
"pointShow": true, //环形进度中的进度球是否需要显示，默认不显示
"pointRadius": 8, //默认是环形进度宽度的一半
"pointColor": "#FFFFFF", //环形进度中的进度球颜色
"pointImageBase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAERklEQVRYR82Yf2jUdRjHX5875137cbcfOF1Omfij1DDC3BKEWeCPUMERy2pgkQvBQUY5EfrB6AfIlrVFG4gYJWmaxASV/AHlQKptRTRSywyHu5oudttOt+623T3x3Pe8rbntbiTdvv99P5/n83ne3/fn/Tyf5/ka4nkqxObKJd3RS1Y/FCI8JpBnDLOATASvQJuBVoSvptpoCKTQ6fPQTYUJxXJhYhlkV8t0PxRjWIeQH3Ya6zF0As0IJ51wtOMlc2O8JWOD2CtJbj9FCK8KLACcsXyPMu83cBnDOz1O6tlqBkbbY1QQGXvFHQpQJiHeABy6cKodpiXD/AxYPxcezIbcVEh3QrcfPLfgpw448Tv81gV/9UF/MOoyYGy8aXNQ27XV9IwEcgcI13syDzsVwDMI4fn7MmHT/ZbzBZlYg2M8Alz2WmCO/AK/eiOGBp06RJAK38vmyvDl/9pPGQj6qUV4CrAbA88uhp0FMD0ZptjiP5DBENzog8pG+OQCiEKAIIbDdidlwxkZAqEaCFAuwtvKQHISlD0EryyDe6ZYznsH4JoPzrbC6Va42gNdfshwwhw3rMmDVXkw2wUpSdaavwdhTzPU/gh9qgiDGMNrPQ6qbmskCsJdI0+KcEA1oAzsWDYEICjw/XU4cAGOX4GewNiMuB2wYR5sXgwPz1A6h4C82xxlJGAMm3u2m891pzAIDcMAnBFYou/PPQC7C4cY+PIqlJ8Dz83oJuOei35EbhpUrYTH5wwxsqsBPv7ZejfQ4oDVGr4GTUSZbCNElYahirC+CGamgjJwphVKTkAwZsq5E5fdBgfXw+o8i5E/bkLRsahY/dgo93mpM2kfSpYJ8inCWg3DXQWwfaklwsZ22HIK2nzxC3Kk5SwX7F8LBTkwEIIPfoDdjZHwNZwiSImZViPzA8J3mglnpkH9RiskVYQ7G+DgxfiOYCyYejQli6Cy0BKrhqyyoawAXofhEeOukVIR9unIytlwrMgSyqVOWHN0fBHGy4+K9XQxLMwinCw21sO5axFtCC8Yd7UcEnhah/Y8CqVhaVq0vX4+Xjex7d5aAS8utez2tcCOr6MC/cy4quUbYLkOnd0E+TOsyXVfwHlP7M3jtViRCyefsKybrsOqI9GV3+pxtImQq0OXtsC9qdbkoo+i5xavn3HtVG8Xn7dM/rwFC/dHmDB4FESvCMk61F4GyZHsmFMXyXB3BQJoBm7fZm3WNwg5tVEQfaqJNiGBTIBnkmhiMkSH+30pFZPgPJHQjGnodMDyyXF3hG/RdDR4/v9bFMp93dRNknoikowSXlmFcUyGGlNxjFlt50N2CiRNoNrWAqajFyqbJlJtR44l4X3H7bsqVge2YS4siXRgWu5r2a8dWEsHHL8bHVj00kx0Lzr89g535TaKkQl05eDF0PTfu/LhSDShuUh32MnqD1GIGfF/ArwiI/5PBOn0+eL7P/EPYtpkF4ik2AkAAAAASUVORK5CYII=", //环形进度中的进度球的图片base64
}
}),
methods: {
dofButtonClicked() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
if (this.intervalHandler) {
clearInterval(this.intervalHandler)
this.intervalHandler = null
} else {
this.intervalHandler = setInterval(() => {
tempObj.progressCounter += (this.step || 1)
if (tempObj.progressCounter >= tempObj.totalCounter) {
tempObj.progressCounter = tempObj.totalCounter
clearInterval(this.intervalHandler)
this.intervalHandler = null
}
this.chartData = JSON.parse(JSON.stringify(tempObj))
}, 1000);
}
},
dofButtonClicked1() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
tempObj.progressCounter += (this.step || 1)
if (tempObj.progressCounter <= tempObj.totalCounter) {
if (tempObj.progressCounter >= tempObj.totalCounter) {
tempObj.progressCounter = tempObj.totalCounter
clearInterval(this.intervalHandler)
this.intervalHandler = null
}
this.chartData = JSON.parse(JSON.stringify(tempObj))
}
},
dofButtonClicked2() {
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
},
dofButtonClicked3() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
tempObj.progressCounter = 0
this.chartData = JSON.parse(JSON.stringify(tempObj))
}
}
}
</script>
#Attributes
| Prop |
Type |
Required |
Default |
Description |
data |
Object |
N |
注1 |
环形进度条参数 |
{
"completedColor": "#00ffff", //环形进度条未完成后的颜色默认#267AFF
"incompletedColor": "#eef5d5d5", //环形进度条未完成后的颜色，默认透明
"thickness": 4, //环形进度条宽度，默认4
"cornerRadius": 40, //环形的半径，默认是width/2
"totalCounter": 360, //环形进度条的最大值，默认是360
"progressCounter": 100, //设置进度值，默认是从0-360, 默认为0
"autoProgress": false, //设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
"clockwise": true, //环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
"startingSlice": 180, //环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
"pointShow": false, //环形进度中的进度球是否需要显示，默认不显示
"pointRadius": 8, //默认是环形进度宽度的一半
"pointColor": "#FFFFFF", //环形进度中的进度球颜色
"backgroundColor":"#FF3B30",//环形背景色默认透明
"backgroundRadius" : 48, //环形背景半径，默认和cornerRadius 持平
"text":"PCB", //中间字体
"textSize":18, //字体大小 默认14
"textColor":"#FFFFFF", //字体颜色
"pointImageBase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAERklEQVRYR82Yf2jUdRjHX5875137cbcfOF1Omfij1DDC3BKEWeCPUMERy2pgkQvBQUY5EfrB6AfIlrVFG4gYJWmaxASV/AHlQKptRTRSywyHu5oudttOt+623T3x3Pe8rbntbiTdvv99P5/n83ne3/fn/Tyf5/ka4nkqxObKJd3RS1Y/FCI8JpBnDLOATASvQJuBVoSvptpoCKTQ6fPQTYUJxXJhYhlkV8t0PxRjWIeQH3Ya6zF0As0IJ51wtOMlc2O8JWOD2CtJbj9FCK8KLACcsXyPMu83cBnDOz1O6tlqBkbbY1QQGXvFHQpQJiHeABy6cKodpiXD/AxYPxcezIbcVEh3QrcfPLfgpw448Tv81gV/9UF/MOoyYGy8aXNQ27XV9IwEcgcI13syDzsVwDMI4fn7MmHT/ZbzBZlYg2M8Alz2WmCO/AK/eiOGBp06RJAK38vmyvDl/9pPGQj6qUV4CrAbA88uhp0FMD0ZptjiP5DBENzog8pG+OQCiEKAIIbDdidlwxkZAqEaCFAuwtvKQHISlD0EryyDe6ZYznsH4JoPzrbC6Va42gNdfshwwhw3rMmDVXkw2wUpSdaavwdhTzPU/gh9qgiDGMNrPQ6qbmskCsJdI0+KcEA1oAzsWDYEICjw/XU4cAGOX4GewNiMuB2wYR5sXgwPz1A6h4C82xxlJGAMm3u2m891pzAIDcMAnBFYou/PPQC7C4cY+PIqlJ8Dz83oJuOei35EbhpUrYTH5wwxsqsBPv7ZejfQ4oDVGr4GTUSZbCNElYahirC+CGamgjJwphVKTkAwZsq5E5fdBgfXw+o8i5E/bkLRsahY/dgo93mpM2kfSpYJ8inCWg3DXQWwfaklwsZ22HIK2nzxC3Kk5SwX7F8LBTkwEIIPfoDdjZHwNZwiSImZViPzA8J3mglnpkH9RiskVYQ7G+DgxfiOYCyYejQli6Cy0BKrhqyyoawAXofhEeOukVIR9unIytlwrMgSyqVOWHN0fBHGy4+K9XQxLMwinCw21sO5axFtCC8Yd7UcEnhah/Y8CqVhaVq0vX4+Xjex7d5aAS8utez2tcCOr6MC/cy4quUbYLkOnd0E+TOsyXVfwHlP7M3jtViRCyefsKybrsOqI9GV3+pxtImQq0OXtsC9qdbkoo+i5xavn3HtVG8Xn7dM/rwFC/dHmDB4FESvCMk61F4GyZHsmFMXyXB3BQJoBm7fZm3WNwg5tVEQfaqJNiGBTIBnkmhiMkSH+30pFZPgPJHQjGnodMDyyXF3hG/RdDR4/v9bFMp93dRNknoikowSXlmFcUyGGlNxjFlt50N2CiRNoNrWAqajFyqbJlJtR44l4X3H7bsqVge2YS4siXRgWu5r2a8dWEsHHL8bHVj00kx0Lzr89g535TaKkQl05eDF0PTfu/LhSDShuUh32MnqD1GIGfF/ArwiI/5PBOn0+eL7P/EPYtpkF4ik2AkAAAAASUVORK5CYII=", //环形进度中的进度球的图片base64
}
#Events
| 事件名称 |
说明 |
回调参数 |
progresscycleTap |
点击组件是触发事件 |
event |
浙公网安备 33010602011771号