重构进度条组件
parent
584c943c5d
commit
3da409d97c
|
|
@ -23,7 +23,7 @@ const DEFAULT_OPT = {
|
|||
let notifyIns = null
|
||||
|
||||
function merge(opt = {}) {
|
||||
let output = Object.assign({}, DEFAULT_OPT)
|
||||
let output = { ...DEFAULT_OPT }
|
||||
|
||||
for (let k in opt) {
|
||||
if (opt[k] !== void 0) {
|
||||
|
|
@ -68,6 +68,7 @@ class Notify extends Component {
|
|||
margin-top: 16px !important;
|
||||
}
|
||||
.noselect {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
img,
|
||||
|
|
|
|||
|
|
@ -6,297 +6,198 @@
|
|||
|
||||
import { css, html, Component, styleMap } from 'wkit'
|
||||
|
||||
const RADIUS = 50
|
||||
|
||||
class Progress extends Component {
|
||||
static props = {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
attribute: false,
|
||||
observer(val) {
|
||||
this.value = this.clamp(val)
|
||||
this.value = this.#fix(val)
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line' // line/circle/dashboard
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
attribute: false
|
||||
},
|
||||
textInside: {
|
||||
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
|
||||
},
|
||||
showText: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
attribute: true
|
||||
},
|
||||
backColor: {
|
||||
type: String,
|
||||
default: '#ebeef5',
|
||||
attribute: false
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#606266',
|
||||
attribute: false
|
||||
},
|
||||
strokeLinecap: {
|
||||
type: String,
|
||||
default: 'round', //butt/round/square
|
||||
attribute: false
|
||||
}
|
||||
type: 'line' // line/circle/dashboard
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&[step='1'] {
|
||||
--wc-progress-active-color: var(--wc-progress-active-color-1);
|
||||
}
|
||||
&[step='2'] {
|
||||
--wc-progress-active-color: var(--wc-progress-active-color-2);
|
||||
}
|
||||
&[step='3'] {
|
||||
--wc-progress-active-color: var(--wc-progress-active-color-3);
|
||||
}
|
||||
&[step='4'] {
|
||||
--wc-progress-active-color: var(--wc-progress-active-color-4);
|
||||
}
|
||||
&[step='5'] {
|
||||
--wc-progress-active-color: var(--wc-progress-active-color-5);
|
||||
}
|
||||
}
|
||||
`,
|
||||
// line
|
||||
css`
|
||||
:host([type='line']) {
|
||||
width: 100%;
|
||||
.progress-text {
|
||||
width: 40px;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
|
||||
.progress-value {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -32px;
|
||||
margin-left: -24px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background: var(--color-dark-2);
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-dark-2);
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:host(:hover) {
|
||||
.progress-value {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
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;
|
||||
height: var(--wc-progress-line-width, 6px);
|
||||
border-radius: 32px;
|
||||
background: var(--wc-progress-inactive-color, var(--color-plain-2));
|
||||
|
||||
.thumb {
|
||||
width: 0;
|
||||
height: var(--wc-progress-line-width, 6px);
|
||||
border-radius: 32px;
|
||||
background: var(--wc-progress-active-color, var(--color-teal-1));
|
||||
transition: 0.6s ease;
|
||||
transition-property: width, background;
|
||||
}
|
||||
}
|
||||
.progress-text {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
`,
|
||||
// circle & dashboard
|
||||
css`
|
||||
:host([type='circle']),
|
||||
:host([type='dashboard']) {
|
||||
width: var(--wc-progress-size, 128px);
|
||||
height: var(--wc-progress-size, 128px);
|
||||
}
|
||||
`
|
||||
]
|
||||
// 周长
|
||||
#perimeter = 2 * Math.PI * RADIUS
|
||||
|
||||
#colors
|
||||
|
||||
get relativeStrokeWidth() {
|
||||
return ((this.strokeWidth / 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'
|
||||
let 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}
|
||||
M 64 64
|
||||
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`,
|
||||
strokeDasharray: `${this.#perimeter * this.rate}px, ${this.#perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset
|
||||
})
|
||||
}
|
||||
|
||||
get strokeDashoffset() {
|
||||
const offset = (-1 * this.perimeter * (1 - this.rate)) / 2
|
||||
let 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`,
|
||||
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.strokeWidth * 0.4
|
||||
: this.width * 0.111111 + 2
|
||||
return size + 'px'
|
||||
}
|
||||
|
||||
clamp(val) {
|
||||
#fix(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() {
|
||||
#drawCircle() {
|
||||
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.backColor}
|
||||
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.strokeLinecap}
|
||||
stroke-width=${this.value ? this.relativeStrokeWidth : 0}
|
||||
style=${this.circlePathStyle}
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<svg viewBox="0 0 128 128">
|
||||
<path
|
||||
d=${this.trackPath}
|
||||
stroke="var(--wc-progress-inactive-color, var(--color-plain-2))"
|
||||
stroke-width="var(--wc-progress-line-width, 6px)"
|
||||
stroke-linecap="round"
|
||||
fill="none"
|
||||
style=${this.trailPathStyle}
|
||||
/>
|
||||
<path
|
||||
d=${this.trackPath}
|
||||
stroke="var(--wc-progress-active-color, var(--color-teal-1))"
|
||||
stroke-linecap="round"
|
||||
stroke-width="var(--wc-progress-line-width, 6px)"
|
||||
fill="none"
|
||||
style=${this.circlePathStyle}
|
||||
/>
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
renderLine() {
|
||||
let $barInnerText = ''
|
||||
if (this.textInside && this.showText) {
|
||||
$barInnerText = html`
|
||||
<div
|
||||
class="bar-innerText"
|
||||
style=${styleMap({
|
||||
color: this.textColor,
|
||||
'line-height': this.strokeWidth + 'px'
|
||||
})}
|
||||
>
|
||||
${this.value + '%'}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
#drawLine() {
|
||||
return html`
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="bar-outer"
|
||||
:style=${styleMap({
|
||||
height: this.strokeWidth + 'px',
|
||||
'background-color': this.backColor
|
||||
})}
|
||||
>
|
||||
<div class="bar-inner" style=${this.barStyle}>${$barInnerText}</div>
|
||||
</div>
|
||||
<mark
|
||||
class="thumb"
|
||||
style=${styleMap({ width: this.value + '%' })}
|
||||
></mark>
|
||||
</div>
|
||||
<div class="progress-value" style=${styleMap({ left: this.value + '%' })}>
|
||||
${this.value + '%'}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
render() {
|
||||
let $outSideText = ''
|
||||
if (this.showText && !this.textInside) {
|
||||
$outSideText = html`
|
||||
<div
|
||||
class="progress-text"
|
||||
style=${styleMap({
|
||||
color: this.textColor,
|
||||
fontSize: this.progressTextSize
|
||||
})}
|
||||
>
|
||||
${this.value + '%'}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
render() {
|
||||
let step = ~~(this.value / 20) || 1
|
||||
return html`
|
||||
${this.type === 'line' ? this.renderLine() : this.renderCircle()}
|
||||
${$outSideText}
|
||||
<main class="container" step=${step}>
|
||||
${this.type === 'line' ? this.#drawLine() : this.#drawCircle()}
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue