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

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan 2020-12-01 10:12:54 +08:00
commit 28afc8a521
48 changed files with 259 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/markdown/changelog.en-US.md
View File

@ -1,5 +1,9 @@
# Changelog
### Tips
The current document is the changelog of Vant 2.x. If you want to view the changelog of Vant 3.x, please visit [Vant 3.x Changelog](https://youzan.github.io/vant/next/#/en-US/changelog).
### Intro
Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
@ -10,6 +14,8 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
- Minor version：released every one to two months, including backwards compatible features.
- Major version：including breaking changes and new features.
## Details
### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
`2020-11-26`

8
docs/markdown/changelog.zh-CN.md
View File

@ -1,5 +1,9 @@
# 更新日志
### 提示
当前文档为 Vant 2.x 版本的更新日志，如需查询 Vant 3.x 的更新内容，请访问 [Vant 3.x 更新日志](https://youzan.github.io/vant/next/#/zh-CN/changelog)。
### 介绍
Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
@ -10,6 +14,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
## 更新内容
### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
`2020-11-26`
@ -29,7 +35,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
**Bug Fixes**
- Button: 修复图标按钮和图标按钮无法垂直对齐的问题 [#7636](https://github.com/youzan/vant/issues/7636)
- Button: 修复图标按钮和非图标按钮无法垂直对齐的问题 [#7636](https://github.com/youzan/vant/issues/7636)
- Popover: 修复在 nuxt.js 上编译报错的问题 [f3ad7e](https://github.com/youzan/vant/commit/f3ad7ed1a77cd2f19001489ea64df0d61429ce33)
### [v2.11.0](https://github.com/youzan/vant/compare/v2.10.14...v2.11.0)

2
src/action-bar/README.md
View File

@ -58,7 +58,7 @@ Use `badge` prop to show badge in icon.
```html
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
<van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" text="Icon2" />
<van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
<van-action-bar-button type="warning" text="Button" />

2
src/action-bar/README.zh-CN.md
View File

@ -60,7 +60,7 @@ export default {
```html
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" text="购物车" />
<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
<van-action-bar-button type="warning" text="加入购物车" />

2
src/action-bar/demo/index.vue
View File

@ -36,7 +36,7 @@
<demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
<van-action-bar-button type="warning" :text="t('button1')" />

6
src/action-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -99,7 +99,7 @@ exports[`should render demo and match snapshot 1`] = `
tabindex="0"
>
<div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon"
style="color: rgb(7, 193, 96);"
style="color: rgb(238, 10, 36);"
>
</div>
Icon1
@ -162,7 +162,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<button type="button"
class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--warning van-action-bar-button--first"
style="color: rgb(255, 255, 255); border-color: #be99ff; background: rgb(190, 153, 255);"
style="color: white; border-color: #be99ff; background: rgb(190, 153, 255);"
>
<div class="van-button__content">
<span class="van-button__text">
@ -172,7 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
<button type="button"
class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last"
style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"
style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;"
>
<div class="van-button__content">
<span class="van-button__text">

70
src/badge/README.md
View File

@ -15,7 +15,13 @@ app.use(Badge);
### Basic Usage
```html
<van-badge content="5">
<van-badge :content="5">
<div class="child" />
</van-badge>
<van-badge :content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot>
@ -24,8 +30,8 @@ app.use(Badge);
<style>
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
@ -35,10 +41,13 @@ app.use(Badge);
### Max
```html
<van-badge content="20" max="9">
<van-badge :content="20" max="9">
<div class="child" />
</van-badge>
<van-badge content="200" max="99">
<van-badge :content="50" max="20">
<div class="child" />
</van-badge>
<van-badge :content="200" max="99">
<div class="child" />
</van-badge>
```
@ -46,7 +55,10 @@ app.use(Badge);
### Custom Color
```html
<van-badge content="5" color="#1989fa">
<van-badge :content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
@ -54,10 +66,45 @@ app.use(Badge);
</van-badge>
```
### Standaline
### Custom Content
Use `content` slot to custom :content of badge.
```html
<van-badge content="200" max="99" />
<van-badge>
<div class="child" />
<template #content>
<van-icon name="success" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="cross" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="down" class="badge-icon" />
</template>
</van-badge>
```
```css
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
```
### Standalone
```html
<van-badge :content="20" />
<van-badge :content="200" max="99" />
```
## API
@ -73,9 +120,10 @@ app.use(Badge);
### Slots
| Name | Description |
| ------- | ------------ |
| default | Default slot |
| Name | Description |
| ------- | -------------------- |
| default | Default slot |
| content | Custom badge content |
### Less Variables

51
src/badge/README.zh-CN.md
View File

@ -24,14 +24,20 @@ app.use(Badge);
<van-badge :content="5">
<div class="child" />
</van-badge>
<van-badge :content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
<style>
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
@ -46,6 +52,9 @@ app.use(Badge);
<van-badge :content="20" max="9">
<div class="child" />
</van-badge>
<van-badge :content="50" max="20">
<div class="child" />
</van-badge>
<van-badge :content="200" max="99">
<div class="child" />
</van-badge>
@ -59,16 +68,54 @@ app.use(Badge);
<van-badge :content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
```
### 自定义徽标内容
通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。
```html
<van-badge>
<div class="child" />
<template #content>
<van-icon name="success" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="cross" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="down" class="badge-icon" />
</template>
</van-badge>
```
```css
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
```
### 独立展示
当 Badge 没有子元素时，会作为一个独立的元素进行展示。
```html
<van-badge :content="20" />
<van-badge :content="200" max="99" />
```

26
src/badge/demo/index.vue
View File

@ -18,41 +18,35 @@
</demo-block>
<demo-block :title="t('customColor')">
<van-badge content="5" :color="BLUE">
<van-badge content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot :color="BLUE">
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('standalone')">
<van-badge content="200" max="99" style="margin-left: 16px;" />
<van-badge content="200" max="99" style="margin-left: 16px" />
</demo-block>
</template>
<script>
import { BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
max: '最大值',
standalone: '独立展示',
customColor: '自定义颜色',
customContent: '自定义徽标内容',
},
'en-US': {
max: 'Max',
standalone: 'Standalone',
customColor: 'Custom Color',
customContent: 'Custom Content',
},
},
data() {
return {
BLUE,
};
},
};
</script>
@ -67,10 +61,16 @@ export default {
}
.child {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
background: @gray-2;
border-radius: 4px;
}
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
}
</style>

4
src/button/index.tsx
View File

@ -2,7 +2,7 @@ import { PropType, CSSProperties } from 'vue';
// Utils
import { createNamespace } from '../utils';
import { BORDER_SURROUND, WHITE } from '../utils/constant';
import { BORDER_SURROUND } from '../utils/constant';
import { useRoute, routeProps } from '../composables/use-route';
// Components
@ -116,7 +116,7 @@ export default createComponent({
if (color) {
const style: CSSProperties = {};
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

@ -324,7 +324,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<button type="button"
class="van-button van-button--default van-button--normal"
style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"
style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;"
>
<div class="van-button__content">
<span class="van-button__text">
@ -344,7 +344,7 @@ exports[`should render demo and match snapshot 1`] = `
</button>
<button type="button"
class="van-button van-button--default van-button--normal"
style="color: rgb(255, 255, 255); border: 0px;"
style="color: white; border: 0px;"
>
<div class="van-button__content">
<span class="van-button__text">

2
src/calendar/README.md
View File

@ -112,7 +112,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
Use `color` prop to custom calendar color.
```html
<van-calendar v-model:show="show" color="#07c160" />
<van-calendar v-model:show="show" color="#1989fa" />
```
### Custom Date Range

2
src/calendar/README.zh-CN.md
View File

@ -114,7 +114,7 @@ export default {
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
```html
<van-calendar v-model:show="show" color="#07c160" />
<van-calendar v-model:show="show" color="#1989fa" />
```
### 自定义日期范围

4
src/calendar/demo/index.vue
View File

@ -119,8 +119,6 @@
</template>
<script>
import { GREEN } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -233,7 +231,7 @@ export default {
this.showConfirm = false;
break;
case 'customColor':
this.color = GREEN;
this.color = '#1989fa';
break;
case 'customConfirm':
this.confirmText = this.t('confirmText');

4
src/calendar/test/__snapshots__/index.legacy.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>

2
src/checkbox/README.md
View File

@ -44,7 +44,7 @@ export default {
### Custom Color
```html
<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>
```
### Custom Icon Size

2
src/checkbox/README.zh-CN.md
View File

@ -56,7 +56,7 @@ export default {
通过 `checked-color` 属性设置选中状态的图标颜色。
```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
<van-checkbox v-model="checked" checked-color="#ee0a24">复选框</van-checkbox>
```
### 自定义大小

2
src/checkbox/demo/index.vue
View File

@ -19,7 +19,7 @@
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160">
<van-checkbox v-model="checkbox2" checked-color="#ee0a24">
{{ t('customColor') }}
</van-checkbox>
</demo-block>

2
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -67,7 +67,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-badge__wrapper van-icon van-icon-success"
style="border-color: #07c160; background-color: rgb(7, 193, 96);"
style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
>
</i>
</div>

3
src/circle/README.md
View File

@ -137,6 +137,9 @@ How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| ------------------------ | ------------------- | ----------- |
| @circle-size | `100px` | - |
| @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` | - |

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

@ -153,6 +153,9 @@ export default {
| 名称 | 默认值 | 描述 |
| ------------------------ | ------------------- | ---- |
| @circle-size | `100px` | - |
| @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` | - |

7
src/circle/index.less
View File

@ -3,6 +3,8 @@
.van-circle {
position: relative;
display: inline-block;
width: @circle-size;
height: @circle-size;
text-align: center;
svg {
@ -14,7 +16,12 @@
}
&__layer {
stroke: @circle-layer-color;
}
&__hover {
fill: none;
stroke: @circle-color;
stroke-linecap: round;
}

40
src/circle/index.tsx
View File

@ -1,7 +1,6 @@
import { watch, computed, PropType } from 'vue';
import { raf, cancelRaf } from '@vant/use';
import { isObject, getSizeStyle, createNamespace } from '../utils';
import { BLUE, WHITE } from '../utils/constant';
const [createComponent, bem] = createNamespace('circle');
@ -21,6 +20,9 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
export default createComponent({
props: {
text: String,
size: [Number, String],
color: [String, Object] as PropType<string | Record<string, string>>,
layerColor: String,
strokeLinecap: String as PropType<CanvasLineCap>,
currentRate: {
type: Number,
@ -30,10 +32,6 @@ export default createComponent({
type: [Number, String],
default: 0,
},
size: {
type: [Number, String],
default: 100,
},
fill: {
type: String,
default: 'none',
@ -42,14 +40,6 @@ export default createComponent({
type: [Number, String],
default: 100,
},
layerColor: {
type: String,
default: WHITE,
},
color: {
type: [String, Object],
default: BLUE,
},
strokeWidth: {
type: [Number, String],
default: 40,
@ -105,16 +95,6 @@ export default createComponent({
);
const renderHover = () => {
const style = {
fill: props.fill,
stroke: props.layerColor,
strokeWidth: `${props.strokeWidth}px`,
};
return <path class={bem('hover')} style={style} d={path.value} />;
};
const renderLayer = () => {
const PERIMETER = 3140;
const { color, strokeWidth, currentRate, strokeLinecap } = props;
const offset = (PERIMETER * currentRate) / 100;
@ -129,12 +109,22 @@ export default createComponent({
<path
d={path.value}
style={style}
class={bem('layer')}
class={bem('hover')}
stroke={isObject(color) ? `url(#${id})` : color}
/>
);
};
const renderLayer = () => {
const style = {
fill: props.fill,
stroke: props.layerColor,
strokeWidth: `${props.strokeWidth}px`,
};
return <path class={bem('layer')} style={style} d={path.value} />;
};
const renderGradient = () => {
const { color } = props;
@ -170,8 +160,8 @@ export default createComponent({
<div class={bem()} style={getSizeStyle(props.size)}>
<svg viewBox={`0 0 ${viewBoxSize.value} ${viewBoxSize.value}`}>
{renderGradient()}
{renderHover()}
{renderLayer()}
{renderHover()}
</svg>
{renderText()}
</div>

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

@ -2,19 +2,16 @@
exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
@ -24,19 +21,16 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1060 1060">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 60px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 60px;"
d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
class="van-circle__hover"
>
</path>
</svg>
@ -44,18 +38,16 @@ exports[`should render demo and match snapshot 1`] = `
Custom Width
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
<path class="van-circle__layer"
style="fill: none; stroke: #ebedf0; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#ee0a24"
>
</path>
@ -64,9 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
Custom Color
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<defs>
<linearGradient id="van-circle-3"
@ -85,14 +75,14 @@ exports[`should render demo and match snapshot 1`] = `
</stop>
</linearGradient>
</defs>
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="url(#van-circle-3)"
>
</path>
@ -102,17 +92,17 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
<div class="van-circle"
style="width: 100px; height: 100px; margin-top: 15px;"
style="margin-top: 15px;"
>
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
>
</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"
style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#07c160"
>
</path>
@ -125,14 +115,14 @@ exports[`should render demo and match snapshot 1`] = `
style="width: 120px; height: 120px; margin-top: 15px;"
>
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
>
</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"
style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
class="van-circle__layer"
class="van-circle__hover"
stroke="#7232dd"
>
</path>

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

@ -1,19 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should change stroke linecap when using stroke-linecap prop 1`] = `
<div class="van-circle"
style="width: 100px; height: 100px;"
>
<div class="van-circle">
<svg viewbox="0 0 1040 1040">
<path class="van-circle__hover"
style="fill: none; stroke: #fff; stroke-width: 40px;"
<path class="van-circle__layer"
style="fill: none; stroke-width: 40px;"
d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
>
</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"
style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
class="van-circle__layer"
stroke="#1989fa"
style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
class="van-circle__hover"
>
</path>
</svg>

12
src/divider/demo/index.vue
View File

@ -26,15 +26,15 @@
</demo-block>
<demo-block :title="t('customStyle')">
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
<van-divider
:style="{ borderColor: '#1989fa', color: '#1989fa', padding: '0 16px' }"
>
{{ t('text') }}
</van-divider>
</demo-block>
</template>
<script>
import { BLUE } from '../../utils/constant';
export default {
i18n: {
'zh-CN': {
@ -52,12 +52,6 @@ export default {
customStyle: 'Custom Style',
},
},
data() {
return {
BLUE,
};
},
};
</script>

9
src/dropdown-menu/demo/index.vue
View File

@ -20,12 +20,12 @@
<van-switch v-model="switch2" size="24" :active-color="RED" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<div style="padding: 5px 16px">
<van-button
type="danger"
block
round
style="height: 40px;"
style="height: 40px"
@click="onConfirm"
>
{{ t('confirm') }}
@ -36,7 +36,7 @@
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu :active-color="BLUE">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
@ -58,7 +58,7 @@
</template>
<script>
import { RED, BLUE } from '../../utils/constant';
import { RED } from '../../utils/constant';
export default {
i18n: {
@ -105,7 +105,6 @@ export default {
data() {
return {
RED,
BLUE,
switch1: true,
switch2: false,
value1: 0,

4
src/icon/README.md
View File

@ -38,8 +38,8 @@ Use `badge` prop, the badge will be displayed in the upper right corner of the i
Use `color` prop to set icon color.
```html
<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />
<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />
```
### Icon Size

4
src/icon/README.zh-CN.md
View File

@ -40,8 +40,8 @@ app.use(Icon);
`Icon` 的 `color` 属性用来设置图标的颜色。
```html
<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />
<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />
```
### 图标大小

13
src/icon/demo/index.vue
View File

@ -28,11 +28,11 @@
<demo-block :title="t('color')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
<van-col span="6" @click="copy(demoIcon, { color: '#1989fa' })">
<van-icon name="cart-o" :color="BLUE" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" />
<van-col span="6" @click="copy(demoIcon, { color: RED })">
<van-icon name="fire-o" :color="RED" />
</van-col>
</van-row>
</demo-block>
@ -95,7 +95,7 @@
<script>
import icons from '@vant/icons';
import { BLUE, GREEN } from '../../utils/constant';
import { RED } from '../../utils/constant';
// from https://30secondsofcode.org
function copyToClipboard(str) {
@ -148,8 +148,7 @@ export default {
},
data() {
this.BLUE = BLUE;
this.GREEN = GREEN;
this.RED = RED;
this.icons = icons;
return {
tab: 0,

6
src/index-bar/README.md
View File

@ -69,7 +69,7 @@ export default {
| z-index | z-index | _number \| string_ | `1` |
| sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
| sticky-offset-top | Anchor offset top when sticky | _number_ | `0` |
| highlight-color | Index character highlight color | _string_ | `#07c160` | - |
| highlight-color | Index character highlight color | _string_ | `#ee0a24` | - |
### IndexAnchor Props
@ -99,7 +99,7 @@ How to use: [Custom Theme](#/en-US/theme).
| @index-bar-sidebar-z-index | `2` | - |
| @index-bar-index-font-size | `@font-size-xs` | - |
| @index-bar-index-line-height | `@line-height-xs` | - |
| @index-bar-index-active-color | `@green` | - |
| @index-bar-index-active-color | `@red` | - |
| @index-anchor-z-index | `1` | - |
| @index-anchor-padding | `0 @padding-md` | - |
| @index-anchor-text-color | `@text-color` | - |
@ -107,5 +107,5 @@ How to use: [Custom Theme](#/en-US/theme).
| @index-anchor-font-size | `@font-size-md` | - |
| @index-anchor-line-height | `32px` | - |
| @index-anchor-background-color | `transparent` | - |
| @index-anchor-sticky-text-color | `@green` | - |
| @index-anchor-sticky-text-color | `@red` | - |
| @index-anchor-sticky-background-color | `@white` | - |

6
src/index-bar/README.zh-CN.md
View File

@ -73,7 +73,7 @@ export default {
| z-index | z-index 层级 | _number \| string_ | `1` |
| sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` |
| sticky-offset-top | 锚点自动吸顶时与顶部的距离 | _number_ | `0` |
| highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` |
| highlight-color | 索引字符高亮颜色 | _string_ | `#ee0a24` |
### IndexAnchor Props
@ -103,7 +103,7 @@ export default {
| @index-bar-sidebar-z-index | `2` | - |
| @index-bar-index-font-size | `@font-size-xs` | - |
| @index-bar-index-line-height | `@line-height-xs` | - |
| @index-bar-index-active-color | `@green` | - |
| @index-bar-index-active-color | `@red` | - |
| @index-anchor-z-index | `1` | - |
| @index-anchor-padding | `0 @padding-md` | - |
| @index-anchor-text-color | `@text-color` | - |
@ -111,5 +111,5 @@ export default {
| @index-anchor-font-size | `@font-size-md` | - |
| @index-anchor-line-height | `32px` | - |
| @index-anchor-background-color | `transparent` | - |
| @index-anchor-sticky-text-color | `@green` | - |
| @index-anchor-sticky-text-color | `@red` | - |
| @index-anchor-sticky-background-color | `@white` | - |

2
src/index-bar/index.less
View File

@ -15,7 +15,7 @@
}
&__index {
padding: 0 @padding-base 0 @padding-md;
padding: 0 @padding-xs 0 @padding-md;
font-weight: @font-weight-bold;
font-size: @index-bar-index-font-size;
line-height: @index-bar-index-line-height;

4
src/radio/README.md
View File

@ -65,8 +65,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
<van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
<van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
</van-radio-group>
```

4
src/radio/README.zh-CN.md
View File

@ -77,8 +77,8 @@ export default {
```html
<van-radio-group v-model="radio">
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
<van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
<van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
</van-radio-group>
```

12
src/radio/demo/index.vue
View File

@ -33,10 +33,10 @@
<demo-block :title="t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">
<van-radio name="1" checked-color="#ee0a24">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160">
<van-radio name="2" checked-color="#ee0a24">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
@ -44,12 +44,8 @@
<demo-block :title="t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 2
</van-radio>
<van-radio name="1" icon-size="24px"> {{ t('radio') }} 1 </van-radio>
<van-radio name="2" icon-size="24px"> {{ t('radio') }} 2 </van-radio>
</van-radio-group>
</demo-block>

6
src/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -140,7 +140,7 @@ exports[`should render demo and match snapshot 1`] = `
>
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
<i class="van-badge__wrapper van-icon van-icon-success"
style="border-color: #07c160; background-color: rgb(7, 193, 96);"
style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
>
</i>
</div>
@ -175,9 +175,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
style="font-size: 24px;"
>
<i class="van-badge__wrapper van-icon van-icon-success"
style="border-color: #07c160; background-color: rgb(7, 193, 96);"
>
<i class="van-badge__wrapper van-icon van-icon-success">
</i>
</div>
<span class="van-radio__label">

7
src/style/var.less
View File

@ -241,6 +241,9 @@
@checkbox-disabled-background-color: @border-color;
// Circle
@circle-size: 100px;
@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;
@ -414,14 +417,14 @@
@index-anchor-font-size: @font-size-md;
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-text-color: @green;
@index-anchor-sticky-text-color: @red;
@index-anchor-sticky-background-color: @white;
// IndexBar
@index-bar-sidebar-z-index: 2;
@index-bar-index-font-size: @font-size-xs;
@index-bar-index-line-height: @line-height-xs;
@index-bar-index-active-color: @green;
@index-bar-index-active-color: @red;
// Image
@image-placeholder-text-color: @gray-6;

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

@ -3,7 +3,7 @@
exports[`should change the color of submit button when using button-color prop 1`] = `
<button type="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;"
style="color: white; background: red; border-color: red;"
>
<div class="van-button__content">
</div>

2
src/switch/README.md
View File

@ -49,7 +49,7 @@ export default {
### Custom Color
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
```
### Async Control

2
src/switch/README.zh-CN.md
View File

@ -63,7 +63,7 @@ export default {
`active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
```html
<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
```
### 异步控制

4
src/switch/demo/index.vue
View File

@ -18,8 +18,8 @@
<demo-block :title="t('customColor')">
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
active-color="#ee0a24"
inactive-color="#dcdee0"
/>
</demo-block>

2
src/switch/test/__snapshots__/demo.spec.js.snap
View File

@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<div role="switch"
class="van-switch van-switch--on"
style="background-color: rgb(7, 193, 96);"
style="background-color: rgb(238, 10, 36);"
aria-checked="true"
>
<div class="van-switch__node">

2
src/tabbar/README.md
View File

@ -100,7 +100,7 @@ export default {
### Custom Color
```html
<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">Tab</van-tabbar-item>
<van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="friends-o">Tab</van-tabbar-item>

2
src/tabbar/README.zh-CN.md
View File

@ -106,7 +106,7 @@ export default {
### 自定义颜色
```html
<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>

2
src/tabbar/demo/index.vue
View File

@ -52,7 +52,7 @@
</demo-block>
<demo-block :title="t('customColor')">
<van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
<van-tabbar v-model="active4" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>

2
src/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -167,7 +167,7 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
<div class="van-tabbar-item van-tabbar-item--active"
style="color: rgb(7, 193, 96);"
style="color: rgb(238, 10, 36);"
>
<div class="van-badge__wrapper van-tabbar-item__icon">
<i class="van-badge__wrapper van-icon van-icon-home-o">

3
src/utils/constant.ts
View File

@ -1,8 +1,5 @@
// color
export const RED = '#ee0a24';
export const BLUE = '#1989fa';
export const GREEN = '#07c160';
export const WHITE = '#fff';
// border
export const BORDER = 'van-hairline';