1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../../_util/vue-types';
import { initDefaultProps } from '../../_util/props-util';
import enhancer from './enhancer';
import { propTypes, defaultProps } from './types';
var circlePropTypes = _extends({}, propTypes, {
gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
gapDegree: PropTypes.number
});
var circleDefaultProps = _extends({}, defaultProps, {
gapPosition: 'top'
});
var Circle = {
props: initDefaultProps(circlePropTypes, circleDefaultProps),
methods: {
getPathStyles: function getPathStyles() {
var _$props = this.$props,
percent = _$props.percent,
strokeWidth = _$props.strokeWidth,
strokeColor = _$props.strokeColor,
_$props$gapDegree = _$props.gapDegree,
gapDegree = _$props$gapDegree === undefined ? 0 : _$props$gapDegree,
gapPosition = _$props.gapPosition;
var radius = 50 - strokeWidth / 2;
var beginPositionX = 0;
var beginPositionY = -radius;
var endPositionX = 0;
var endPositionY = -2 * radius;
switch (gapPosition) {
case 'left':
beginPositionX = -radius;
beginPositionY = 0;
endPositionX = 2 * radius;
endPositionY = 0;
break;
case 'right':
beginPositionX = radius;
beginPositionY = 0;
endPositionX = -2 * radius;
endPositionY = 0;
break;
case 'bottom':
beginPositionY = radius;
endPositionY = 2 * radius;
break;
default:
}
var pathString = 'M 50,50 m ' + beginPositionX + ',' + beginPositionY + '\n a ' + radius + ',' + radius + ' 0 1 1 ' + endPositionX + ',' + -endPositionY + '\n a ' + radius + ',' + radius + ' 0 1 1 ' + -endPositionX + ',' + endPositionY;
var len = Math.PI * 2 * radius;
var trailPathStyle = {
strokeDasharray: len - gapDegree + 'px ' + len + 'px',
strokeDashoffset: '-' + gapDegree / 2 + 'px',
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
};
var strokePathStyle = {
stroke: strokeColor,
strokeDasharray: percent / 100 * (len - gapDegree) + 'px ' + len + 'px',
strokeDashoffset: '-' + gapDegree / 2 + 'px',
transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s' // eslint-disable-line
};
return { pathString: pathString, trailPathStyle: trailPathStyle, strokePathStyle: strokePathStyle };
}
},
render: function render() {
var h = arguments[0];
var _$props2 = this.$props,
prefixCls = _$props2.prefixCls,
strokeWidth = _$props2.strokeWidth,
trailWidth = _$props2.trailWidth,
trailColor = _$props2.trailColor,
strokeLinecap = _$props2.strokeLinecap,
percent = _$props2.percent,
restProps = _objectWithoutProperties(_$props2, ['prefixCls', 'strokeWidth', 'trailWidth', 'trailColor', 'strokeLinecap', 'percent']);
var _getPathStyles = this.getPathStyles(),
pathString = _getPathStyles.pathString,
trailPathStyle = _getPathStyles.trailPathStyle,
strokePathStyle = _getPathStyles.strokePathStyle;
delete restProps.percent;
delete restProps.gapDegree;
delete restProps.gapPosition;
delete restProps.strokeColor;
var pathFirst = {
attrs: {
d: pathString,
stroke: trailColor,
'stroke-linecap': strokeLinecap,
'stroke-width': trailWidth || strokeWidth,
'fill-opacity': '0'
},
'class': prefixCls + '-circle-trail',
style: trailPathStyle
};
var pathSecond = {
attrs: {
d: pathString,
'stroke-linecap': strokeLinecap,
'stroke-width': percent === 0 ? 0 : strokeWidth,
'fill-opacity': '0'
},
'class': prefixCls + '-circle-path',
style: strokePathStyle,
ref: 'svgPathRef'
};
return h(
'svg',
_mergeJSXProps([{ 'class': prefixCls + '-circle', attrs: { viewBox: '0 0 100 100' }
}, restProps]),
[h('path', pathFirst), h('path', pathSecond)]
);
}
};
export default enhancer(Circle);