This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

修复编译配置;完成进度条组件

old
宇天 2021-03-09 12:10:50 +08:00
parent a7a6c84267
commit 01ae866456
7 changed files with 272 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.dev.js
View File

@ -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 `

2
build.prod.js
View File

@ -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 `

1
src/form/index.js
View File

@ -8,4 +8,3 @@ import './checkbox'
import './switch'
import './select'
import './star'
import './progress'

143
src/form/progress.wc
View File

@ -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>

1
src/form/switch.wc
View File

@ -193,6 +193,7 @@ export default class Switch {
break
case 'active-text':
case 'inactive-text':
console.log('------------->>>')
this.props[name] = val + ''
break
}

142
src/progress/canvas.js Normal file
View File

@ -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)
}
}

127
src/progress/index.wc Normal file
View File

@ -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>