blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

style(Circle): add @circle-layer-color less var

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 22:51:34 +08:00 committed by neverland
parent 1a6cf64f54
commit 65a5ed8553
13 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/button/index.tsx
View File

@ -1,7 +1,7 @@
// Utils
import { createNamespace } from '../utils';
import { emit, inherit } from '../utils/functional';
import { BORDER_SURROUND, WHITE } from '../utils/constant';
import { BORDER_SURROUND } from '../utils/constant';
import { routeProps, RouteProps, functionalRoute } from '../utils/router';
// Components
@ -70,7 +70,7 @@ function Button(
const style: Record<string, string | number> = {};
if (color) {
style.color = plain ? color : WHITE;
style.color = plain ? color : 'white';
if (!plain) {
// Use background instead of backgroundColor to make linear-gradient work

4
src/button/test/__snapshots__/demo.spec.js.snap
View File

@ -75,11 +75,11 @@ exports[`renders demo correctly 1`] = `
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
</button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
<div><button class="van-button van-button--default van-button--normal" style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
</button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
</button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
</button> <button class="van-button van-button--default van-button--normal" style="color: white; border: 0px;">
<div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
</button></div>
</div>

4
src/calendar/test/__snapshots__/index.spec.js.snap
View File

@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
<div class="van-button__content"><span class="van-button__text">确定</span></div>
</button></div>
</div>
@ -100,7 +100,7 @@ exports[`color prop when type is single 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
<div class="van-button__content"><span class="van-button__text">确定</span></div>
</button></div>
</div>

1
src/circle/README.md
View File

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

1
src/circle/README.zh-CN.md
View File

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

28
src/circle/index.js
View File

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

4
src/circle/index.less
View File

@ -14,6 +14,10 @@
}
&__layer {
stroke: @circle-layer-color;
}
&__hover {
fill: none;
stroke: @circle-color;
stroke-linecap: round;

24
src/circle/test/__snapshots__/demo.spec.js.snap
View File

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

12
src/circle/test/__snapshots__/index.spec.js.snap
View File

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

4
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -80,9 +80,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
</div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
</div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: white; background: rgb(190, 153, 255); border-color: #be99ff;">
<div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
</button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
</button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">立即购买</span></div>
</button>
</div>

1
src/style/var.less
View File

@ -242,6 +242,7 @@
// Circle
@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;

2
src/submit-bar/test/__snapshots__/index.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`button slot 1`] = `
exports[`button-color prop 1`] = `
<div class="van-submit-bar">
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: rgb(255, 255, 255); background: red; border-color: red;">
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: white; background: red; border-color: red;">
<div class="van-button__content"></div>
</button></div>
</div>

1
src/utils/constant.ts
View File

@ -1,6 +1,5 @@
// color
export const RED = '#ee0a24';
export const WHITE = '#fff';
// border
export const BORDER = 'van-hairline';