增加进度条组件
parent
ac286cbcba
commit
b7767bdb33
|
|
@ -140,6 +140,7 @@ class Input extends Component {
|
|||
|
||||
.list {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
&.hide {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,310 @@
|
|||
/**
|
||||
* {进度条}
|
||||
* @author chensbox<chensbox@foxmail.com>
|
||||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, styleMap, svg } from '@bd/core'
|
||||
|
||||
class Progress extends Component {
|
||||
static props = {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
attribute: false,
|
||||
observer(val) {
|
||||
this.value = this.clamp(val)
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line' // line/circle/dashboard
|
||||
},
|
||||
'stroke-width': {
|
||||
type: Number,
|
||||
default: 6,
|
||||
attribute: false
|
||||
},
|
||||
'text-inside': {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: true
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: '', // success/exception/warning
|
||||
attribute: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
attribute: false,
|
||||
observer(val) {
|
||||
if (val.includes(',')) {
|
||||
this.#colors = val.split(',')
|
||||
} else {
|
||||
this.#colors = val
|
||||
}
|
||||
}
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 126,
|
||||
attribute: false
|
||||
},
|
||||
'show-text': {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: true
|
||||
},
|
||||
|
||||
format: {
|
||||
type: Function,
|
||||
default: null,
|
||||
attribute: false
|
||||
},
|
||||
'back-color': {
|
||||
type: String,
|
||||
default: '#ebeef5',
|
||||
attribute: false
|
||||
},
|
||||
'text-color': {
|
||||
type: String,
|
||||
default: '#606266',
|
||||
attribute: false
|
||||
},
|
||||
'stroke-linecap': {
|
||||
type: String,
|
||||
default: 'round', //butt/round/square
|
||||
attribute: false
|
||||
}
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
:host([type='line']) {
|
||||
width: 100%;
|
||||
.progress-text {
|
||||
width: auto;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.bar-outer,
|
||||
.bar-inner {
|
||||
height: 100%;
|
||||
border-radius: 999rem;
|
||||
}
|
||||
.bar-inner {
|
||||
transition: 0.6s ease;
|
||||
transition-property: width, background-color;
|
||||
.bar-innerText {
|
||||
margin: 0 5px;
|
||||
height: 100%;
|
||||
line-height: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.progress-text {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#colors
|
||||
|
||||
get relativeStrokeWidth() {
|
||||
return ((this['stroke-width'] / this.width) * 100).toFixed(1)
|
||||
}
|
||||
get radius() {
|
||||
if (this.type === 'circle' || this.type === 'dashboard') {
|
||||
return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
get trackPath() {
|
||||
const radius = this.radius
|
||||
const isDashboard = this.type === 'dashboard'
|
||||
return `
|
||||
M 50 50
|
||||
m 0 ${isDashboard ? '' : '-'}${radius}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
|
||||
`
|
||||
}
|
||||
get trailPathStyle() {
|
||||
return styleMap({
|
||||
strokeDasharray: `${this.perimeter * this.rate}px, ${this.perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset
|
||||
})
|
||||
}
|
||||
get strokeDashoffset() {
|
||||
const offset = (-1 * this.perimeter * (1 - this.rate)) / 2
|
||||
return `${offset}px`
|
||||
}
|
||||
get perimeter() {
|
||||
return 2 * Math.PI * this.radius
|
||||
}
|
||||
get rate() {
|
||||
return this.type === 'dashboard' ? 0.75 : 1
|
||||
}
|
||||
get stroke() {
|
||||
let ret
|
||||
if (this.color) {
|
||||
ret = this.getCurrentColor(this.value)
|
||||
} else {
|
||||
switch (this.status) {
|
||||
case 'success':
|
||||
ret = '#13ce66'
|
||||
break
|
||||
case 'exception':
|
||||
ret = '#ff4949'
|
||||
break
|
||||
case 'warning':
|
||||
ret = '#e6a23c'
|
||||
break
|
||||
default:
|
||||
ret = '#20a0ff'
|
||||
}
|
||||
}
|
||||
return ret
|
||||
}
|
||||
get circlePathStyle() {
|
||||
return styleMap({
|
||||
strokeDasharray: `${this.perimeter * this.rate * (this.value / 100)}px, ${
|
||||
this.perimeter
|
||||
}px`,
|
||||
strokeDashoffset: this.strokeDashoffset,
|
||||
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
|
||||
})
|
||||
}
|
||||
get barStyle() {
|
||||
return styleMap({
|
||||
width: this.value + '%',
|
||||
'background-color': this.stroke //this.getCurrentColor(this.value)
|
||||
})
|
||||
}
|
||||
get progressTextSize() {
|
||||
let size =
|
||||
this.type === 'line'
|
||||
? 12 + this['stroke-width'] * 0.4
|
||||
: this.width * 0.111111 + 2
|
||||
return size + 'px'
|
||||
}
|
||||
|
||||
clamp(val) {
|
||||
return Math.max(0, Math.min(val, 100))
|
||||
}
|
||||
getCurrentColor(value) {
|
||||
if (!Array.isArray(this.#colors)) {
|
||||
return this.#colors
|
||||
}
|
||||
let length = this.#colors.length
|
||||
let step = 100 / length
|
||||
let index = Math.floor(value / step)
|
||||
|
||||
return this.#colors[index >= length ? length - 1 : index]
|
||||
}
|
||||
|
||||
renderCircle() {
|
||||
return html`
|
||||
<div
|
||||
style=${styleMap({
|
||||
height: this.width + 'px',
|
||||
width: this.width + 'px'
|
||||
})}
|
||||
>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path
|
||||
role="circle__track"
|
||||
d=${this.trackPath}
|
||||
stroke=${this['back-color']}
|
||||
stroke-width=${this.relativeStrokeWidth}
|
||||
fill="none"
|
||||
style=${this.trailPathStyle}
|
||||
></path>
|
||||
<path
|
||||
role="circle__path"
|
||||
d=${this.trackPath}
|
||||
stroke=${this.stroke}
|
||||
fill="none"
|
||||
stroke-linecap=${this['stroke-linecap']}
|
||||
stroke-width=${this.value ? this.relativeStrokeWidth : 0}
|
||||
style=${this.circlePathStyle}
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
renderLine() {
|
||||
let $barInnerText = ''
|
||||
if (this['text-inside'] && this['show-text']) {
|
||||
$barInnerText = html`
|
||||
<div
|
||||
class="bar-innerText"
|
||||
style=${styleMap({
|
||||
color: this['text-color'],
|
||||
'line-height': this['stroke-width'] + 'px'
|
||||
})}
|
||||
v-if="showText && textInside"
|
||||
>
|
||||
${this.value + '%'}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="progress-bar" style=${`width:${this.width}px`}>
|
||||
<div
|
||||
class="bar-outer"
|
||||
:style=${styleMap({
|
||||
height: this['stroke-width'] + 'px',
|
||||
'background-color': this['back-color']
|
||||
})}
|
||||
>
|
||||
<div class="bar-inner" style=${this.barStyle}>${$barInnerText}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
render() {
|
||||
let $outSideText = ''
|
||||
if (this['show-text'] && !this['text-inside']) {
|
||||
$outSideText = html`
|
||||
<div
|
||||
class="progress-text"
|
||||
style=${styleMap({
|
||||
color: this['text-color'],
|
||||
fontSize: this.progressTextSize
|
||||
})}
|
||||
>
|
||||
${this.value + '%'}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.type === 'line' ? this.renderLine() : this.renderCircle()}
|
||||
${$outSideText}
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Progress.reg('progress')
|
||||
Loading…
Reference in New Issue