修复编译配置;完成进度条组件
parent
a7a6c84267
commit
01ae866456
|
|
@ -64,7 +64,7 @@ function mkWCFile({ style, html, js }) {
|
|||
.slice(1, -1)
|
||||
.map(it => {
|
||||
var tmp = it.split(':')
|
||||
return tmp[0].trim()
|
||||
return tmp[0].trim().replace(/^['"]|['"]$/g, '')
|
||||
})
|
||||
return `
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ function mkWCFile({ style, html, js }) {
|
|||
.slice(1, -1)
|
||||
.map(it => {
|
||||
var tmp = it.split(':')
|
||||
return tmp[0].trim()
|
||||
return tmp[0].trim().replace(/^['"]|['"]$/g, '')
|
||||
})
|
||||
return `
|
||||
|
||||
|
|
|
|||
|
|
@ -8,4 +8,3 @@ import './checkbox'
|
|||
import './switch'
|
||||
import './select'
|
||||
import './star'
|
||||
import './progress'
|
||||
|
|
|
|||
|
|
@ -1,143 +0,0 @@
|
|||
<template>
|
||||
<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>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
// flex: 1;
|
||||
// height: var(--size, 10px);
|
||||
// border-radius: 9px;
|
||||
// background: var(--color-plain-2);
|
||||
|
||||
// span {
|
||||
// display: block;
|
||||
// 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%;
|
||||
fill: none;
|
||||
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([type='danger']) label span {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
|
||||
:host([type='info']) label span {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
|
||||
:host([type='success']) label span {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
|
||||
:host([type='warning']) label span {
|
||||
background: var(--color-orange-1);
|
||||
}
|
||||
|
||||
:host([type='primary']) label span {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default class Progress {
|
||||
props = {
|
||||
value: 0,
|
||||
max: 1
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
this.__THUMB__ = this.root.children[1].lastElementChild
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.props.value = +val
|
||||
this.calculate()
|
||||
}
|
||||
|
||||
calculate() {
|
||||
var { max, value } = this.props
|
||||
// this.__THUMB__.style.width = `${(100 * value) / max}%`
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.calculate()
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'max':
|
||||
var max = +val
|
||||
if (max !== max || max < 1) {
|
||||
max = 1
|
||||
}
|
||||
this.props.max = max
|
||||
this.calculate()
|
||||
break
|
||||
|
||||
case 'value':
|
||||
var v = +val
|
||||
if (v === v) {
|
||||
this.props.value = v
|
||||
this.calculate()
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -193,6 +193,7 @@ export default class Switch {
|
|||
break
|
||||
case 'active-text':
|
||||
case 'inactive-text':
|
||||
console.log('------------->>>')
|
||||
this.props[name] = val + ''
|
||||
break
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
*
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2021/03/08 14:25:13
|
||||
*/
|
||||
|
||||
export function drawLine(el, size, opt) {
|
||||
var ctx = el.getContext('2d')
|
||||
var { width, height } = size
|
||||
var {
|
||||
colors,
|
||||
value,
|
||||
'show-text': showText,
|
||||
'default-color': bg,
|
||||
'line-size': line,
|
||||
'font-size': font
|
||||
} = opt
|
||||
var color = colors[0]
|
||||
var half
|
||||
|
||||
if (colors.length > 1) {
|
||||
let idx = Math.floor(value / (100 / colors.length))
|
||||
if (idx === colors.length) {
|
||||
idx--
|
||||
}
|
||||
color = colors[idx]
|
||||
}
|
||||
|
||||
//
|
||||
line = line || 10
|
||||
font = font || 10
|
||||
half = line / 2
|
||||
|
||||
el.width = width
|
||||
el.height = height
|
||||
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
ctx.strokeStyle = bg
|
||||
ctx.lineWidth = line
|
||||
ctx.lineCap = 'round'
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(half, half)
|
||||
ctx.lineTo(width - half, half)
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
||||
if (value > 0) {
|
||||
ctx.strokeStyle = color
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(half, half)
|
||||
ctx.lineTo(((width - half) * value) / 100, half)
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
||||
if (showText) {
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.font = `bold ${font}px Arial`
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.textAlign = 'right'
|
||||
ctx.fillText(
|
||||
(value < 100 ? value.toFixed(1) : 100) + '%',
|
||||
((width - half) * value) / 100,
|
||||
half
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function drawCircle(el, size, opt, start = -90, end = 270) {
|
||||
var ctx = el.getContext('2d')
|
||||
var { width } = size
|
||||
var {
|
||||
colors,
|
||||
value,
|
||||
'show-text': showText,
|
||||
'default-color': bg,
|
||||
'line-size': line,
|
||||
'font-size': font
|
||||
} = opt
|
||||
var color = colors[0]
|
||||
var half = width / 2
|
||||
|
||||
if (width === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (colors.length > 1) {
|
||||
let idx = Math.floor(value / (100 / colors.length))
|
||||
if (idx === colors.length) {
|
||||
idx--
|
||||
}
|
||||
color = colors[idx]
|
||||
}
|
||||
|
||||
//
|
||||
line = line || 10
|
||||
font = font || 32
|
||||
el.width = width
|
||||
el.height = width
|
||||
|
||||
ctx.clearRect(0, 0, width, width)
|
||||
|
||||
ctx.strokeStyle = bg
|
||||
ctx.lineWidth = line
|
||||
ctx.lineCap = 'round'
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(
|
||||
half,
|
||||
half,
|
||||
half - line / 2,
|
||||
(Math.PI / 180) * start,
|
||||
(Math.PI / 180) * end,
|
||||
false
|
||||
) //整圆
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
||||
if (value > 0) {
|
||||
ctx.strokeStyle = color
|
||||
ctx.beginPath()
|
||||
ctx.arc(
|
||||
half,
|
||||
half,
|
||||
half - line / 2,
|
||||
(Math.PI / 180) * start,
|
||||
(Math.PI / 180) * (((end - start) * value) / 100 + start),
|
||||
false
|
||||
) //整圆
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
if (showText) {
|
||||
ctx.fillStyle = color
|
||||
ctx.font = `${font}px Arial`
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText((value < 100 ? value.toFixed(1) : 100) + '%', half, half)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<canvas />
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
:host([type='circle']),
|
||||
:host([type='dashboard']) {
|
||||
display: inline-flex;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { drawLine, drawCircle } from './canvas'
|
||||
|
||||
export default class Progress {
|
||||
props = {
|
||||
value: 0,
|
||||
type: 'line',
|
||||
colors: ['#48c9b0'],
|
||||
'default-color': '#f2f5fc',
|
||||
'line-size': null,
|
||||
'font-size': null,
|
||||
'show-text': false
|
||||
}
|
||||
|
||||
state = {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
this.__CANVAS__ = this.root.children[1]
|
||||
// // 圆形进度条默认值为32
|
||||
// if (this.props.type === 'circle' || this.props.type === 'dashboard') {
|
||||
// this.props['font-size'] = 32
|
||||
// }
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.props.value
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.props.value = +val.toFixed(2)
|
||||
if (this.props.value > 100) {
|
||||
this.props.value = 100
|
||||
} else if (this.props.value < 0) {
|
||||
this.props.value = 0
|
||||
}
|
||||
this.draw()
|
||||
}
|
||||
|
||||
draw() {
|
||||
var type = this.props.type
|
||||
switch (type) {
|
||||
case 'circle':
|
||||
drawCircle(this.__CANVAS__, this.state, this.props)
|
||||
break
|
||||
|
||||
case 'dashboard':
|
||||
drawCircle(this.__CANVAS__, this.state, this.props, -225, 45)
|
||||
break
|
||||
|
||||
// line
|
||||
default:
|
||||
drawLine(this.__CANVAS__, this.state, this.props)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.state.width = this.clientWidth
|
||||
this.state.height = this.clientHeight
|
||||
|
||||
this.draw()
|
||||
}
|
||||
|
||||
watch() {
|
||||
switch (name) {
|
||||
case 'line-size':
|
||||
case 'font-size':
|
||||
this.props[name] = val || 10
|
||||
break
|
||||
|
||||
case 'default-color':
|
||||
this.props[name] = val || '#f2f5fc'
|
||||
break
|
||||
case 'colors':
|
||||
if (val === null) {
|
||||
this.props.colors = ['#48c9b0']
|
||||
} else {
|
||||
this.props.colors = val.split(',').map(s => s.trim())
|
||||
}
|
||||
break
|
||||
|
||||
case 'type':
|
||||
this.props.type = val || 'line'
|
||||
break
|
||||
|
||||
case 'show-text':
|
||||
this.props[name] = val !== null
|
||||
break
|
||||
|
||||
case 'value':
|
||||
var v = +val
|
||||
if (v === v) {
|
||||
this.value = +v
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue