style(Circle): add @circle-layer-color less var
This commit is contained in:
chenjiahan
neverland
@@ -132,6 +132,7 @@ How to use: [Custom Theme](#/en-US/theme).
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------ | ------------------- | ----------- |
|
||||
| @circle-color | `@blue` | - |
|
||||
| @circle-layer-color | `@white` | - |
|
||||
| @circle-text-color | `@text-color` | - |
|
||||
| @circle-text-font-weight | `@font-weight-bold` | - |
|
||||
| @circle-text-font-size | `@font-size-md` | - |
|
||||
|
||||
@@ -143,6 +143,7 @@ export default {
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------ | ------------------- | ---- |
|
||||
| @circle-color | `@blue` | - |
|
||||
| @circle-layer-color | `@white` | - |
|
||||
| @circle-text-color | `@text-color` | - |
|
||||
| @circle-text-font-weight | `@font-weight-bold` | - |
|
||||
| @circle-text-font-size | `@font-size-md` | - |
|
||||
|
||||
+12
-16
@@ -1,6 +1,5 @@
|
||||
import { createNamespace, isObject, addUnit } from '../utils';
|
||||
import { raf, cancelRaf } from '../utils/dom/raf';
|
||||
import { WHITE } from '../utils/constant';
|
||||
|
||||
const [createComponent, bem] = createNamespace('circle');
|
||||
|
||||
@@ -23,6 +22,7 @@ export default createComponent({
|
||||
props: {
|
||||
text: String,
|
||||
color: [String, Object],
|
||||
layerColor: String,
|
||||
strokeLinecap: String,
|
||||
value: {
|
||||
type: Number,
|
||||
@@ -44,10 +44,6 @@ export default createComponent({
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
layerColor: {
|
||||
type: String,
|
||||
default: WHITE,
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 40,
|
||||
@@ -80,6 +76,14 @@ export default createComponent({
|
||||
},
|
||||
|
||||
layerStyle() {
|
||||
return {
|
||||
fill: `${this.fill}`,
|
||||
stroke: `${this.layerColor}`,
|
||||
strokeWidth: `${this.strokeWidth}px`,
|
||||
};
|
||||
},
|
||||
|
||||
hoverStyle() {
|
||||
const offset = (PERIMETER * this.value) / 100;
|
||||
|
||||
return {
|
||||
@@ -90,14 +94,6 @@ export default createComponent({
|
||||
};
|
||||
},
|
||||
|
||||
hoverStyle() {
|
||||
return {
|
||||
fill: `${this.fill}`,
|
||||
stroke: `${this.layerColor}`,
|
||||
strokeWidth: `${this.strokeWidth}px`,
|
||||
};
|
||||
},
|
||||
|
||||
gradient() {
|
||||
return isObject(this.color);
|
||||
},
|
||||
@@ -164,11 +160,11 @@ export default createComponent({
|
||||
<div class={bem()} style={this.style}>
|
||||
<svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
|
||||
{this.LinearGradient}
|
||||
<path class={bem('hover')} style={this.hoverStyle} d={this.path} />
|
||||
<path class={bem('layer')} style={this.layerStyle} d={this.path} />
|
||||
<path
|
||||
d={this.path}
|
||||
class={bem('layer')}
|
||||
style={this.layerStyle}
|
||||
class={bem('hover')}
|
||||
style={this.hoverStyle}
|
||||
stroke={this.gradient ? `url(#${this.uid})` : this.color}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -14,6 +14,10 @@
|
||||
}
|
||||
|
||||
&__layer {
|
||||
stroke: @circle-layer-color;
|
||||
}
|
||||
|
||||
&__hover {
|
||||
fill: none;
|
||||
stroke: @circle-color;
|
||||
stroke-linecap: round;
|
||||
|
||||
@@ -4,22 +4,22 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">70%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
|
||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
|
||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 60px;"></path>
|
||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">宽度定制</div>
|
||||
</div>
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">颜色定制</div>
|
||||
</div>
|
||||
@@ -30,20 +30,20 @@ exports[`renders demo correctly 1`] = `
|
||||
<stop offset="100%" stop-color="#6149f6"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__hover" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">渐变色</div>
|
||||
</div>
|
||||
<div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">逆时针</div>
|
||||
</div>
|
||||
<div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">大小定制</div>
|
||||
</div>
|
||||
|
||||
@@ -2,21 +2,21 @@
|
||||
|
||||
exports[`size prop 1`] = `
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
|
||||
</svg></div>
|
||||
`;
|
||||
|
||||
exports[`speed is 0 1`] = `
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
|
||||
</svg></div>
|
||||
`;
|
||||
|
||||
exports[`stroke-linecap prop 1`] = `
|
||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
|
||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
|
||||
</svg></div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user