更新进度条
parent
dc95fc5a66
commit
fb5693c29d
|
@ -8,3 +8,4 @@ import './checkbox'
|
||||||
import './switch'
|
import './switch'
|
||||||
import './select'
|
import './select'
|
||||||
import './star'
|
import './star'
|
||||||
|
import './progress'
|
||||||
|
|
|
@ -1,5 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<label><span></span></label>
|
<label>
|
||||||
|
<svg>
|
||||||
|
<circle cx="70" cy="70" r="70"></circle>
|
||||||
|
<circle cx="70" cy="70" r="70"></circle>
|
||||||
|
</svg>
|
||||||
|
<svg width="140" height="30">
|
||||||
|
<line x1="0" y1="0" x2="140" y2="0" stroke="black" />
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -8,31 +16,56 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
height: var(--size, 10px);
|
// height: var(--size, 10px);
|
||||||
border-radius: 9px;
|
// border-radius: 9px;
|
||||||
background: var(--color-plain-2);
|
// background: var(--color-plain-2);
|
||||||
|
|
||||||
span {
|
// span {
|
||||||
display: block;
|
// display: block;
|
||||||
width: 0;
|
// width: 0;
|
||||||
|
// height: 100%;
|
||||||
|
// border-radius: 9px;
|
||||||
|
// background: var(--color-teal-1);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
position: relative;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// box-shadow: inset 0 0 50px #000;
|
||||||
|
// background: #222;
|
||||||
|
// z-index: 1000;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
position: relative;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
line {
|
||||||
|
stroke: #efefef;
|
||||||
|
stroke-width: 30;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg circle {
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 9px;
|
fill: none;
|
||||||
background: var(--color-teal-1);
|
stroke: #efefef;
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke-linecap: round;
|
||||||
|
transform: translate(5px, 5px);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
stroke-dasharray: 440;
|
||||||
|
stroke-dashoffset: calc(440 - (440 * 85) / 100);
|
||||||
|
stroke: #00a1ff;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([size='large']) label {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([size='medium']) label {
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([size='mini']) label {
|
|
||||||
height: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([type='danger']) label span {
|
:host([type='danger']) label span {
|
||||||
|
@ -51,12 +84,8 @@
|
||||||
background: var(--color-orange-1);
|
background: var(--color-orange-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([type='inverse']) label span {
|
:host([type='primary']) label span {
|
||||||
background: var(--color-dark-1);
|
background: var(--color-teal-1);
|
||||||
}
|
|
||||||
|
|
||||||
:host([color='purple']) label span {
|
|
||||||
background: var(--color-purple-1);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -83,7 +112,7 @@ export default class Progress {
|
||||||
|
|
||||||
calculate() {
|
calculate() {
|
||||||
var { max, value } = this.props
|
var { max, value } = this.props
|
||||||
this.__THUMB__.style.width = `${(100 * value) / max}%`
|
// this.__THUMB__.style.width = `${(100 * value) / max}%`
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
Reference in New Issue