blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan 2020-04-11 09:09:00 +08:00 committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -29,14 +29,14 @@
## Features ## Features
* 60+ Reusable components - 60+ Reusable components
* 90% Unit test coverage - 90% Unit test coverage
* Extensive documentation and demos - Extensive documentation and demos
* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) - Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
* Support Custom Theme - Support Custom Theme
* Support i18n - Support i18n
* Support TS - Support TS
* Support SSR - Support SSR
## Install ## Install
@ -71,7 +71,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
## Ecosystem ## Ecosystem
| Project | Description | | Project | Description |
|-----|------| | --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | | [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | | [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
@ -80,8 +80,8 @@ Modern browsers and Android 4.0+, iOS 8.0+.
## Links ## Links
* [Documentation](https://youzan.github.io/vant) - [Documentation](https://youzan.github.io/vant)
* [Changelog](https://youzan.github.io/vant#/en-US/changelog) - [Changelog](https://youzan.github.io/vant#/en-US/changelog)
## Preview ## Preview

24
README.zh-CN.md
View File

@ -25,14 +25,14 @@
## 特性 ## 特性
* 60+ 高质量组件 - 60+ 高质量组件
* 90% 单元测试覆盖率 - 90% 单元测试覆盖率
* 完善的中英文文档和示例 - 完善的中英文文档和示例
* 支持按需引入 - 支持按需引入
* 支持主题定制 - 支持主题定制
* 支持国际化 - 支持国际化
* 支持 TS - 支持 TS
* 支持 SSR - 支持 SSR
## 安装 ## 安装
@ -83,7 +83,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
## 生态 ## 生态
| 项目 | 描述 | | 项目 | 描述 |
|-----|------| | --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | | [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | | [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
@ -92,9 +92,9 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
## 链接 ## 链接
* [详细文档](https://youzan.github.io/vant) - [详细文档](https://youzan.github.io/vant)
* [更新日志](https://youzan.github.io/vant#/zh-CN/changelog) - [更新日志](https://youzan.github.io/vant#/zh-CN/changelog)
* [码云镜像](https://gitee.com/organizations/vant-contrib) - [码云镜像](https://gitee.com/organizations/vant-contrib)
## 手机预览 ## 手机预览

2
docs/markdown/home.en-US.md
View File

@ -32,7 +32,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
### Ecosystem ### Ecosystem
| Project | Description | | Project | Description |
| ------------------------------------------------------------------------------------------- | ------------------------------ | | --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | | [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | | [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |

2
docs/markdown/home.zh-CN.md
View File

@ -48,7 +48,7 @@
### 生态 ### 生态
| 项目 | 描述 | | 项目 | 描述 |
| ------------------------------------------------------------------------------------------- | -------------------------- | | --- | --- |
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | | [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | | [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |

4
package.json
View File

@ -30,6 +30,7 @@
} }
}, },
"lint-staged": { "lint-staged": {
"*.md": ["prettier --write"],
"*.{ts,tsx,js,vue,less}": [ "*.{ts,tsx,js,vue,less}": [
"prettier --write", "prettier --write",
"git add" "git add"
@ -92,7 +93,8 @@
] ]
}, },
"prettier": { "prettier": {
"singleQuote": true "singleQuote": true,
"proseWrap": "never"
}, },
"browserslist": [ "browserslist": [
"Android >= 4.0", "Android >= 4.0",

72
src/action-sheet/README.md
View File

@ -29,16 +29,16 @@ export default {
actions: [ actions: [
{ name: 'Option' }, { name: 'Option' },
{ name: 'Option' }, { name: 'Option' },
{ name: 'Option', subname: 'Description' } { name: 'Option', subname: 'Description' },
] ],
}; };
}, },
methods: { methods: {
onSelect(item) { onSelect(item) {
this.show = false; this.show = false;
Toast(item.name); Toast(item.name);
} },
} },
}; };
``` ```
@ -59,15 +59,15 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
show: false show: false,
}; };
}, },
methods: { methods: {
onCancel() { onCancel() {
this.show = false; this.show = false;
Toast('cancel'); Toast('cancel');
} },
} },
}; };
``` ```
@ -96,10 +96,10 @@ export default {
actions: [ actions: [
{ name: 'Option', color: '#07c160' }, { name: 'Option', color: '#07c160' },
{ loading: true }, { loading: true },
{ name: 'Disabled Option', disabled: true } { name: 'Disabled Option', disabled: true },
] ],
}; };
} },
}; };
``` ```
@ -122,40 +122,40 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | Whether to show ActionSheet | *boolean* | `false` | | v-model (value) | Whether to show ActionSheet | _boolean_ | `false` |
| actions | Options | *Action[]* | `[]` | | actions | Options | _Action[]_ | `[]` |
| title | Title | *string* | - | | title | Title | _string_ | - |
| cancel-text | Text of cancel button | *string* | - | | cancel-text | Text of cancel button | _string_ | - |
| description `v2.2.8` | Description above the options | *string* | - | | description `v2.2.8` | Description above the options | _string_ | - |
| close-icon `v2.2.13` | Close icon name | *string* | `cross` | | close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
| duration `v2.0.3` | Transition duration, unit second | *number \| string* | `0.3` | | duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` |
| round `v2.0.9` | Whether to show round corner | *boolean* | `true` | | round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
| overlay | Whether to show overlay | *boolean* | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| close-on-popstate `v2.5.3` | Whether to close when popstate | *boolean* | `false` | | close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-action | Whether to close when click action | *boolean* | `false` | | close-on-click-action | Whether to close when click action | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| get-container | Return the mount node for ActionSheet | *string \| () => Element* | - | | get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - |
### Data Structure of Action ### Data Structure of Action
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | --------- | ---------------------------- | --------- |
| name | Title | *string* | | name | Title | _string_ |
| subname | Subtitle | *string* | | subname | Subtitle | _string_ |
| color | Text color | *string* | | color | Text color | _string_ |
| className | className for the option | *any* | | className | className for the option | _any_ |
| loading | Whether to be loading status | *boolean* | | loading | Whether to be loading status | _boolean_ |
| disabled | Whether to be disabled | *boolean* | | disabled | Whether to be disabled | _boolean_ |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| select | Triggered when click option | *action: Action, index: number* | | select | Triggered when click option | _action: Action, index: number_ |
| cancel | Triggered when click cancel button | - | | cancel | Triggered when click cancel button | - |
| open | Triggered when open ActionSheet | - | | open | Triggered when open ActionSheet | - |
| close | Triggered when close ActionSheet | - | | close | Triggered when close ActionSheet | - |

78
src/action-sheet/README.zh-CN.md
View File

@ -33,8 +33,8 @@ export default {
actions: [ actions: [
{ name: '选项' }, { name: '选项' },
{ name: '选项' }, { name: '选项' },
{ name: '选项', subname: '描述信息' } { name: '选项', subname: '描述信息' },
] ],
}; };
}, },
methods: { methods: {
@ -43,9 +43,9 @@ export default {
// 可以通过 close-on-click-action 属性开启自动收起 // 可以通过 close-on-click-action 属性开启自动收起
this.show = false; this.show = false;
Toast(item.name); Toast(item.name);
} },
} },
} };
``` ```
### 展示取消按钮 ### 展示取消按钮
@ -67,16 +67,16 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
show: false show: false,
}; };
}, },
methods: { methods: {
onCancel() { onCancel() {
this.show = false; this.show = false;
Toast('cancel'); Toast('cancel');
} },
} },
} };
``` ```
### 展示描述信息 ### 展示描述信息
@ -112,11 +112,11 @@ export default {
actions: [ actions: [
{ name: '选项', color: '#07c160' }, { name: '选项', color: '#07c160' },
{ loading: true }, { loading: true },
{ name: '禁用选项', disabled: true } { name: '禁用选项', disabled: true },
] ],
};
},
}; };
}
}
``` ```
### 自定义面板 ### 自定义面板
@ -140,42 +140,42 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 是否显示动作面板 | *boolean* | `false` | | v-model (value) | 是否显示动作面板 | _boolean_ | `false` |
| actions | 面板选项列表 | *Action[]* | `[]` | | actions | 面板选项列表 | _Action[]_ | `[]` |
| title | 顶部标题 | *string* | - | | title | 顶部标题 | _string_ | - |
| cancel-text | 取消按钮文字 | *string* | - | | cancel-text | 取消按钮文字 | _string_ | - |
| description `v2.2.8` | 选项上方的描述信息 | *string* | - | | description `v2.2.8` | 选项上方的描述信息 | _string_ | - |
| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | *string* | `cross` | | close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
| duration `v2.0.3` | 动画时长，单位秒 | *number \| string* | `0.3` | | duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` |
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` | | round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` |
| overlay | 是否显示遮罩层 | *boolean* | `true` | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | | lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Action 数据结构 ### Action 数据结构
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值： `actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | --------- | ------------------------ | --------- |
| name | 标题 | *string* | | name | 标题 | _string_ |
| subname | 二级标题 | *string* | | subname | 二级标题 | _string_ |
| color | 选项文字颜色 | *string* | | color | 选项文字颜色 | _string_ |
| className | 为对应列添加额外的 class | *any* | | className | 为对应列添加额外的 class | _any_ |
| loading | 是否为加载状态 | *boolean* | | loading | 是否为加载状态 | _boolean_ |
| disabled | 是否为禁用状态 | *boolean* | | disabled | 是否为禁用状态 | _boolean_ |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| select | 点击选项时触发，禁用或加载状态下不会触发 | *action: Action, index: number* | | select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ |
| cancel | 点击取消按钮时触发 | - | | cancel | 点击取消按钮时触发 | - |
| open | 打开面板时触发 | - | | open | 打开面板时触发 | - |
| close | 关闭面板时触发 | - | | close | 关闭面板时触发 | - |

96
src/address-edit/README.md
View File

@ -35,8 +35,8 @@ export default {
data() { data() {
return { return {
areaList, areaList,
searchResult: [] searchResult: [],
} };
}, },
methods: { methods: {
onSave() { onSave() {
@ -47,16 +47,18 @@ export default {
}, },
onChangeDetail(val) { onChangeDetail(val) {
if (val) { if (val) {
this.searchResult = [{ this.searchResult = [
{
name: '黄龙万科中心', name: '黄龙万科中心',
address: '杭州市西湖区' address: '杭州市西湖区',
}]; },
];
} else { } else {
this.searchResult = []; this.searchResult = [];
} }
} },
} },
} };
``` ```
## API ## API
@ -64,33 +66,33 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| area-list | Area List | *object* | - | | area-list | Area List | _object_ | - |
| area-columns-placeholder `v2.2.5` | placeholder of area columns | *string[]* | `[]` | | area-columns-placeholder `v2.2.5` | placeholder of area columns | _string[]_ | `[]` |
| area-placeholder | placeholder of area input field | *string* | `Area` | | area-placeholder | placeholder of area input field | _string_ | `Area` |
| address-info | Address Info | *AddressInfo* | `{}` | | address-info | Address Info | _AddressInfo_ | `{}` |
| search-result | Address search result | *SearchResult[]* | `[]` | | search-result | Address search result | _SearchResult[]_ | `[]` |
| show-postal | Whether to show postal field | *boolean* | `false` | | show-postal | Whether to show postal field | _boolean_ | `false` |
| show-delete | Whether to show delete button | *boolean* | `false` | | show-delete | Whether to show delete button | _boolean_ | `false` |
| show-set-default | Whether to show default address switch | *boolean* | `false` | | show-set-default | Whether to show default address switch | _boolean_ | `false` |
| show-search-result | Whether to show address search result | *boolean* | `false` | | show-search-result | Whether to show address search result | _boolean_ | `false` |
| show-area | Whether to show area cell | *boolean* | `true` | | show-area | Whether to show area cell | _boolean_ | `true` |
| show-detail | Whether to show detail field | *boolean* | `true` | | show-detail | Whether to show detail field | _boolean_ | `true` |
| disable-area `v2.5.0` | Whether to disable area select | *boolean* | `false` | | disable-area `v2.5.0` | Whether to disable area select | _boolean_ | `false` |
| save-button-text | Save button text | *string* | `Save` | | save-button-text | Save button text | _string_ | `Save` |
| delete-button-text | Delete button text | *string* | `Delete` | | delete-button-text | Delete button text | _string_ | `Delete` |
| detail-rows | Detail input rows | *number \| string* | `1` | | detail-rows | Detail input rows | _number \| string_ | `1` |
| detail-maxlength `v2.0.4` | Detail maxlength | *number \| string* | `200` | | detail-maxlength `v2.0.4` | Detail maxlength | _number \| string_ | `200` |
| is-saving | Whether to show save button loading status | *boolean* | `false` | | is-saving | Whether to show save button loading status | _boolean_ | `false` |
| is-deleting | Whether to show delete button loading status | *boolean* | `false` | | is-deleting | Whether to show delete button loading status | _boolean_ | `false` |
| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | | tel-validator | The method to validate tel | _(tel: string) => boolean_ | - |
| postal-validator `v2.1.2` | The method to validate postal | *(tel: string) => boolean* | - | | postal-validator `v2.1.2` | The method to validate postal | _(tel: string) => boolean_ | - |
| validator | Custom validator | *(key, val) => string* | - | | validator | Custom validator | _(key, val) => string_ | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| save | Triggered when click save button | content：form content | | save | Triggered when click save button | content：form content |
| focus | Triggered when focus field | key: field name | | focus | Triggered when focus field | key: field name |
| delete | Triggered when confirm delete | content：form content | | delete | Triggered when confirm delete | content：form content |
@ -104,7 +106,7 @@ export default {
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | --------------------------- |
| default | Custom content below postal | | default | Custom content below postal |
### Methods ### Methods
@ -112,30 +114,30 @@ export default {
Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ---------------- | ------------------ | --------------------- | ------------ |
| setAddressDetail | Set address detail | addressDetail: string | - | | setAddressDetail | Set address detail | addressDetail: string | - |
### AddressInfo Data Structure ### AddressInfo Data Structure
| key | Description | Type | | key | Description | Type |
|------|------|------| | ------------- | ------------------ | ------------------ |
| id | Address Id | *number \| string* | | id | Address Id | _number \| string_ |
| name | Name | *string* | | name | Name | _string_ |
| tel | Phone | *string* | | tel | Phone | _string_ |
| province | Province | *string* | | province | Province | _string_ |
| city | City | *string* | | city | City | _string_ |
| county | County | *string* | | county | County | _string_ |
| addressDetail | Detailed Address | *string* | | addressDetail | Detailed Address | _string_ |
| areaCode | Area code | *string* | | areaCode | Area code | _string_ |
| postalCode | Postal code | *string* | | postalCode | Postal code | _string_ |
| isDefault | Is default address | *boolean* | | isDefault | Is default address | _boolean_ |
### SearchResult Data Structure ### SearchResult Data Structure
| key | Description | Type | | key | Description | Type |
|------|------|------| | ------- | ----------- | -------- |
| name | Name | *string* | | name | Name | _string_ |
| address | Address | *string* | | address | Address | _string_ |
### Area Data Structure ### Area Data Structure

96
src/address-edit/README.zh-CN.md
View File

@ -35,8 +35,8 @@ export default {
data() { data() {
return { return {
areaList, areaList,
searchResult: [] searchResult: [],
} };
}, },
methods: { methods: {
onSave() { onSave() {
@ -47,16 +47,18 @@ export default {
}, },
onChangeDetail(val) { onChangeDetail(val) {
if (val) { if (val) {
this.searchResult = [{ this.searchResult = [
{
name: '黄龙万科中心', name: '黄龙万科中心',
address: '杭州市西湖区' address: '杭州市西湖区',
}]; },
];
} else { } else {
this.searchResult = []; this.searchResult = [];
} }
} },
} },
} };
``` ```
## API ## API
@ -64,33 +66,33 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| area-list | 地区列表 | *object* | - | | area-list | 地区列表 | _object_ | - |
| area-columns-placeholder `v2.2.5` | 地区选择列占位提示文字 | *string[]* | `[]` | | area-columns-placeholder `v2.2.5` | 地区选择列占位提示文字 | _string[]_ | `[]` |
| area-placeholder | 地区输入框占位提示文字 | *string* | `选择省 / 市 / 区` | | area-placeholder | 地区输入框占位提示文字 | _string_ | `选择省 / 市 / 区` |
| address-info | 收货人信息初始值 | *AddressInfo* | `{}` | | address-info | 收货人信息初始值 | _AddressInfo_ | `{}` |
| search-result | 详细地址搜索结果 | *SearchResult[]* | `[]` | | search-result | 详细地址搜索结果 | _SearchResult[]_ | `[]` |
| show-postal | 是否显示邮政编码 | *boolean* | `false` | | show-postal | 是否显示邮政编码 | _boolean_ | `false` |
| show-delete | 是否显示删除按钮 | *boolean* | `false` | | show-delete | 是否显示删除按钮 | _boolean_ | `false` |
| show-set-default | 是否显示默认地址栏 | *boolean* | `false` | | show-set-default | 是否显示默认地址栏 | _boolean_ | `false` |
| show-search-result | 是否显示搜索结果 | *boolean* | `false` | | show-search-result | 是否显示搜索结果 | _boolean_ | `false` |
| show-area | 是否显示地区 | *boolean* | `true` | | show-area | 是否显示地区 | _boolean_ | `true` |
| show-detail | 是否显示详细地址 | *boolean* | `true` | | show-detail | 是否显示详细地址 | _boolean_ | `true` |
| disable-area `v2.5.0` | 是否禁用地区选择 | *boolean* | `false` | | disable-area `v2.5.0` | 是否禁用地区选择 | _boolean_ | `false` |
| save-button-text | 保存按钮文字 | *string* | `保存` | | save-button-text | 保存按钮文字 | _string_ | `保存` |
| delete-button-text | 删除按钮文字 | *string* | `删除` | | delete-button-text | 删除按钮文字 | _string_ | `删除` |
| detail-rows | 详细地址输入框行数 | *number \| string* | `1` | | detail-rows | 详细地址输入框行数 | _number \| string_ | `1` |
| detail-maxlength `v2.0.4` | 详细地址最大长度 | *number \| string* | `200` | | detail-maxlength `v2.0.4` | 详细地址最大长度 | _number \| string_ | `200` |
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | | is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | | is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
| tel-validator | 手机号格式校验函数 | *string => boolean* | - | | tel-validator | 手机号格式校验函数 | _string => boolean_ | - |
| postal-validator `v2.1.2` | 邮政编码格式校验函数 | *string => boolean* | - | | postal-validator `v2.1.2` | 邮政编码格式校验函数 | _string => boolean_ | - |
| validator | 自定义校验函数 | *(key, val) => string* | - | | validator | 自定义校验函数 | _(key, val) => string_ | - |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| save | 点击保存按钮时触发 | content：表单内容 | | save | 点击保存按钮时触发 | content：表单内容 |
| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key | | focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key |
| delete | 确认删除地址时触发 | content：表单内容 | | delete | 确认删除地址时触发 | content：表单内容 |
@ -104,7 +106,7 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ---------------------- |
| default | 在邮政编码下方插入内容 | | default | 在邮政编码下方插入内容 |
### 方法 ### 方法
@ -112,7 +114,7 @@ export default {
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | ---------------- | ------------ | --------------------- | ------ |
| setAddressDetail | 设置详细地址 | addressDetail: string | - | | setAddressDetail | 设置详细地址 | addressDetail: string | - |
### AddressInfo 数据格式 ### AddressInfo 数据格式
@ -120,24 +122,24 @@ export default {
注意：AddressInfo 仅作为初始值传入，表单最终内容可以在 save 事件中获取 注意：AddressInfo 仅作为初始值传入，表单最终内容可以在 save 事件中获取
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| | ------------- | -------------------------------------- | ------------------ |
| id | 每条地址的唯一标识 | *number \| string* | | id | 每条地址的唯一标识 | _number \| string_ |
| name | 收货人姓名 | *string* | | name | 收货人姓名 | _string_ |
| tel | 收货人手机号 | *string* | | tel | 收货人手机号 | _string_ |
| province | 省份 | *string* | | province | 省份 | _string_ |
| city | 城市 | *string* | | city | 城市 | _string_ |
| county | 区县 | *string* | | county | 区县 | _string_ |
| addressDetail | 详细地址 | *string* | | addressDetail | 详细地址 | _string_ |
| areaCode | 地区编码，通过`省市区选择`获取（必填） | *string* | | areaCode | 地区编码，通过`省市区选择`获取（必填） | _string_ |
| postalCode | 邮政编码 | *string* | | postalCode | 邮政编码 | _string_ |
| isDefault | 是否为默认地址 | *boolean* | | isDefault | 是否为默认地址 | _boolean_ |
### SearchResult 数据格式 ### SearchResult 数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| | ------- | -------- | -------- |
| name | 地名 | *string* | | name | 地名 | _string_ |
| address | 详细地址 | *string* | | address | 详细地址 | _string_ |
### 省市县列表数据格式 ### 省市县列表数据格式

14
src/address-edit/index.js
View File

@ -107,7 +107,7 @@ export default createComponent({
if (province && province === city) { if (province && province === city) {
arr.splice(1, 1); arr.splice(1, 1);
} }
return arr.filter(text => text).join('/'); return arr.filter((text) => text).join('/');
} }
return ''; return '';
}, },
@ -145,9 +145,9 @@ export default createComponent({
}, },
onAreaConfirm(values) { onAreaConfirm(values) {
values = values.filter(value => !!value); values = values.filter((value) => !!value);
if (values.some(value => !value.code)) { if (values.some((value) => !value.code)) {
Toast(t('areaEmpty')); Toast(t('areaEmpty'));
return; return;
} }
@ -183,7 +183,7 @@ export default createComponent({
items.push('postalCode'); items.push('postalCode');
} }
const isValid = items.every(item => { const isValid = items.every((item) => {
const msg = this.getErrorMessage(item); const msg = this.getErrorMessage(item);
if (msg) { if (msg) {
this.errorInfo[item] = msg; this.errorInfo[item] = msg;
@ -261,7 +261,7 @@ export default createComponent({
render() { render() {
const { data, errorInfo, searchResult, disableArea } = this; const { data, errorInfo, searchResult, disableArea } = this;
const onFocus = name => () => this.onFocus(name); const onFocus = (name) => () => this.onFocus(name);
// hide bottom field when use search && detail get focused // hide bottom field when use search && detail get focused
const hideBottomFields = const hideBottomFields =
@ -314,7 +314,7 @@ export default createComponent({
onFocus={onFocus('addressDetail')} onFocus={onFocus('addressDetail')}
onBlur={this.onDetailBlur} onBlur={this.onDetailBlur}
onInput={this.onChangeDetail} onInput={this.onChangeDetail}
onSelect-search={event => { onSelect-search={(event) => {
this.$emit('select-search', event); this.$emit('select-search', event);
}} }}
/> />
@ -338,7 +338,7 @@ export default createComponent({
vModel={data.isDefault} vModel={data.isDefault}
vShow={!hideBottomFields} vShow={!hideBottomFields}
title={t('defaultAddress')} title={t('defaultAddress')}
onChange={event => { onChange={(event) => {
this.$emit('change-default', event); this.$emit('change-default', event);
}} }}
/> />

52
src/address-list/README.md
View File

@ -37,24 +37,24 @@ export default {
id: '1', id: '1',
name: 'John Snow', name: 'John Snow',
tel: '13000000000', tel: '13000000000',
address: 'Somewhere' address: 'Somewhere',
}, },
{ {
id: '2', id: '2',
name: 'Ned Stark', name: 'Ned Stark',
tel: '1310000000', tel: '1310000000',
address: 'Somewhere' address: 'Somewhere',
} },
], ],
disabledList: [ disabledList: [
{ {
id: '3', id: '3',
name: 'Tywin', name: 'Tywin',
tel: '1320000000', tel: '1320000000',
address: 'Somewhere' address: 'Somewhere',
} },
] ],
} };
}, },
methods: { methods: {
onAdd() { onAdd() {
@ -62,9 +62,9 @@ export default {
}, },
onEdit(item, index) { onEdit(item, index) {
Toast('Edit:' + index); Toast('Edit:' + index);
} },
} },
} };
``` ```
## API ## API
@ -72,19 +72,19 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Id of chosen address | *string* | - | | v-model | Id of chosen address | _string_ | - |
| list | Address list | *Address[]* | `[]` | | list | Address list | _Address[]_ | `[]` |
| disabled-list | Disabled address list | *Address[]* | `[]` | | disabled-list | Disabled address list | _Address[]_ | `[]` |
| disabled-text | Disabled text | *string* | - | | disabled-text | Disabled text | _string_ | - |
| switchable | Whether to allow switch address | *boolean* | `true` | | switchable | Whether to allow switch address | _boolean_ | `true` |
| add-button-text | Add button text | *string* | `Add new address` | | add-button-text | Add button text | _string_ | `Add new address` |
| default-tag-text `v2.3.0` | Default tag text | *string* | - | | default-tag-text `v2.3.0` | Default tag text | _string_ | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| add | Triggered when click add button | - | | add | Triggered when click add button | - |
| edit | Triggered when edit address | item: address object，index | | edit | Triggered when edit address | item: address object，index |
| select | Triggered when select address | item: address object，index | | select | Triggered when select address | item: address object，index |
@ -95,17 +95,17 @@ export default {
### Data Structure of Address ### Data Structure of Address
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | --------- | ------------------ | ------------------ |
| id | Id | *number \| string* | | id | Id | _number \| string_ |
| name | Name | *string* | | name | Name | _string_ |
| tel | Phone | *number \| string* | | tel | Phone | _number \| string_ |
| address | Address | *string* | | address | Address | _string_ |
| isDefault | Is default address | *boolean* | | isDefault | Is default address | _boolean_ |
### Slots ### Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
|------|------|------| | -------------------- | ------------------------------ | --------- |
| default | Custom content after list | - | | default | Custom content after list | - |
| top | Custom content before list | - | | top | Custom content before list | - |
| item-bottom `v2.5.0` | Custom content after list item | item | | item-bottom `v2.5.0` | Custom content after list item | item |

52
src/address-list/README.zh-CN.md
View File

@ -37,24 +37,24 @@ export default {
id: '1', id: '1',
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
}, },
{ {
id: '2', id: '2',
name: '李四', name: '李四',
tel: '1310000000', tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号' address: '浙江省杭州市拱墅区莫干山路 50 号',
} },
], ],
disabledList: [ disabledList: [
{ {
id: '3', id: '3',
name: '王五', name: '王五',
tel: '1320000000', tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号' address: '浙江省杭州市滨江区江南大道 15 号',
} },
] ],
} };
}, },
methods: { methods: {
onAdd() { onAdd() {
@ -62,9 +62,9 @@ export default {
}, },
onEdit(item, index) { onEdit(item, index) {
Toast('编辑地址:' + index); Toast('编辑地址:' + index);
} },
} },
} };
``` ```
## API ## API
@ -72,19 +72,19 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------------------------- | ----------------- | ----------- | ---------- |
| v-model | 当前选中地址的 id | *string* | - | | v-model | 当前选中地址的 id | _string_ | - |
| list | 地址列表 | *Address[]* | `[]` | | list | 地址列表 | _Address[]_ | `[]` |
| disabled-list | 不可配送地址列表 | *Address[]* | `[]` | | disabled-list | 不可配送地址列表 | _Address[]_ | `[]` |
| disabled-text | 不可配送提示文案 | *string* | - | | disabled-text | 不可配送提示文案 | _string_ | - |
| switchable | 是否允许切换地址 | *boolean* | `true` | | switchable | 是否允许切换地址 | _boolean_ | `true` |
| add-button-text | 底部按钮文字 | *string* | `新增地址` | | add-button-text | 底部按钮文字 | _string_ | `新增地址` |
| default-tag-text `v2.3.0` | 默认地址标签文字 | *string* | - | | default-tag-text `v2.3.0` | 默认地址标签文字 | _string_ | - |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------|------| | --------------- | ------------------------ | --------------------------- |
| add | 点击新增按钮时触发 | - | | add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 | | edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 |
| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 | | select | 切换选中的地址时触发 | item: 地址对象，index: 索引 |
@ -95,17 +95,17 @@ export default {
### Address 数据结构 ### Address 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | --------- | ------------------ | ------------------ |
| id | 每条地址的唯一标识 | *number \| string* | | id | 每条地址的唯一标识 | _number \| string_ |
| name | 收货人姓名 | *string* | | name | 收货人姓名 | _string_ |
| tel | 收货人手机号 | *number \| string* | | tel | 收货人手机号 | _number \| string_ |
| address | 收货地址 | *string* | | address | 收货地址 | _string_ |
| isDefault | 是否为默认地址 | *boolean* | | isDefault | 是否为默认地址 | _boolean_ |
### Slots ### Slots
| 名称 | 说明 | SlotProps | | 名称 | 说明 | SlotProps |
|------|------|------| | -------------------- | -------------------- | ---------- |
| default | 在列表下方插入内容 | - | | default | 在列表下方插入内容 | - |
| top | 在顶部插入内容 | - | | top | 在顶部插入内容 | - |
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 | | item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |

57
src/area/README.md
View File

@ -33,8 +33,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
### Columns Number ### Columns Number
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
Set `columns-num` with 2, you'll have a 2 level picker.
```html ```html
<van-area :area-list="areaList" :columns-num="2" title="Title" /> <van-area :area-list="areaList" :columns-num="2" title="Title" />
@ -57,24 +56,24 @@ Set `columns-num` with 2, you'll have a 2 level picker.
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| value | the `code` of selected area | *string* | - | | value | the `code` of selected area | _string_ | - |
| title | Toolbar title | *string* | - | | title | Toolbar title | _string_ | - |
| confirm-button-text | Text of confirm button | *string* | `Confirm` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | *string* | `Cancel` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` |
| area-list | Area list data | *object* | - | | area-list | Area list data | _object_ | - |
| columns-placeholder `v2.2.5` | Placeholder of columns | *string[]* | `[]` | | columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
| loading | Whether to show loading prompt | *boolean* | `false` | | loading | Whether to show loading prompt | _boolean_ | `false` |
| item-height | Option height | *number \| string* | `44` | | item-height | Option height | _number \| string_ | `44` |
| columns-num | Level of picker | *number \| string* | `3` | | columns-num | Level of picker | _number \| string_ | `3` |
| visible-item-count | Count of visible columns | *number \| string* | `5` | | visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | | swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
| is-oversea-code `v2.1.4` | The method to validate oversea code | *() => boolean* | - | | is-oversea-code `v2.1.4` | The method to validate oversea code | _() => boolean_ | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| confirm | triggers when clicking the confirm button | an array | | confirm | triggers when clicking the confirm button | an array |
| cancel | triggers when clicking the cancel button | - | | cancel | triggers when clicking the cancel button | - |
| change | Triggered when current option changed | Picker instance, current values，column index | | change | Triggered when current option changed | Picker instance, current values，column index |
@ -82,7 +81,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ----------------------- | ---------------------------- |
| title `v2.5.3` | Custom title | | title `v2.5.3` | Custom title |
| columns-top `v2.5.3` | Custom content above columns | | columns-top `v2.5.3` | Custom content above columns |
| columns-bottom `v2.5.3` | Custom content below columns | | columns-bottom `v2.5.3` | Custom content below columns |
@ -92,13 +91,12 @@ Set `columns-num` with 2, you'll have a 2 level picker.
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ----- | ------------------------- | ------------- | ------------ |
| reset | Reset all options by code | code?: string | - | | reset | Reset all options by code | code?: string | - |
### areaList Data Structure ### areaList Data Structure
An object contains three properties: `province_list`, `city_list` and `county_list`. An object contains three properties: `province_list`, `city_list` and `county_list`. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
Example of `AreaList` Example of `AreaList`
@ -131,15 +129,20 @@ All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/src/area/
An array contains selected area objects. An array contains selected area objects.
`code` - code of selected area, `name` - name of selected area `code` - code of selected area, `name` - name of selected area
```js ```js
[{ [
{
code: '330000', code: '330000',
name: 'Zhejiang Province' name: 'Zhejiang Province',
}, { },
{
code: '330100', code: '330100',
name: 'Hangzhou' name: 'Hangzhou',
},{ },
{
code: '330105', code: '330105',
name: 'Xihu District' name: 'Xihu District',
}] },
];
``` ```

40
src/area/README.zh-CN.md
View File

@ -56,24 +56,24 @@ Vue.use(Area);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| value | 当前选中的省市区`code` | *string* | - | | value | 当前选中的省市区`code` | _string_ | - |
| title | 顶部栏标题 | *string* | - | | title | 顶部栏标题 | _string_ | - |
| confirm-button-text | 确认按钮文字 | *string* | `确认` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` |
| area-list | 省市区数据，格式见下方 | *object* | - | | area-list | 省市区数据，格式见下方 | _object_ | - |
| columns-placeholder `v2.2.5` | 列占位提示文字 | *string[]* | `[]` | | columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
| loading | 是否显示加载状态 | *boolean* | `false` | | loading | 是否显示加载状态 | _boolean_ | `false` |
| item-height | 选项高度 | *number \| string* | `44` | | item-height | 选项高度 | _number \| string_ | `44` |
| columns-num | 显示列数，3-省市区，2-省市，1-省 | *number \| string* | `3` | | columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
| visible-item-count | 可见的选项个数 | *number \| string* | `5` | | visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | | swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | *() => boolean* | - | | is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | _() => boolean_ | - |
### Events ### Events
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
| --- | --- | --- | | ------- | ------------------ | ------------------------------------------- |
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | | confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
| cancel | 点击取消按钮时 | - | | cancel | 点击取消按钮时 | - |
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 | | change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
@ -81,7 +81,7 @@ Vue.use(Area);
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ----------------------- | ------------------ |
| title `v2.5.3` | 自定义标题内容 | | title `v2.5.3` | 自定义标题内容 |
| columns-top `v2.5.3` | 自定义选项上方内容 | | columns-top `v2.5.3` | 自定义选项上方内容 |
| columns-bottom `v2.5.3` | 自定义选项下方内容 | | columns-bottom `v2.5.3` | 自定义选项下方内容 |
@ -91,7 +91,7 @@ Vue.use(Area);
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| reset | 根据 code 重置所有选项，若不传 code，则重置到第一项 | code?: string | - | | reset | 根据 code 重置所有选项，若不传 code，则重置到第一项 | code?: string | - |
### 省市区列表数据格式 ### 省市区列表数据格式
@ -141,16 +141,16 @@ Vue.use(Area);
[ [
{ {
code: '110000', code: '110000',
name: '北京市' name: '北京市',
}, },
{ {
code: '110100', code: '110100',
name: '北京市' name: '北京市',
}, },
{ {
code: '110101', code: '110101',
name: '东城区' name: '东城区',
} },
]; ];
``` ```

56
src/button/README.md
View File

@ -62,7 +62,9 @@ Vue.use(Button);
```html ```html
<van-button icon="star-o" type="primary" /> <van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">Button</van-button> <van-button icon="star-o" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">Button</van-button> <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>Button</van-button
>
``` ```
### Size ### Size
@ -92,7 +94,9 @@ Vue.use(Button);
```html ```html
<van-button color="#7232dd">Pure</van-button> <van-button color="#7232dd">Pure</van-button>
<van-button color="#7232dd" plain>Pure</van-button> <van-button color="#7232dd" plain>Pure</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>Gradient</van-button
>
``` ```
## API ## API
@ -100,31 +104,31 @@ Vue.use(Button);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| type | Can be set to `primary` `info` `warning` `danger` | *string* | `default` | | type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
| size | Can be set to `large` `small` `mini` | *string* | `normal` | | size | Can be set to `large` `small` `mini` | _string_ | `normal` |
| text | Text | *string* | - | | text | Text | _string_ | - |
| color `v2.1.8` | Color, support linear-gradient | *string* | - | | color `v2.1.8` | Color, support linear-gradient | _string_ | - |
| icon | Left Icon | *string* | - | | icon | Left Icon | _string_ | - |
| icon-prefix `v2.6.0` | Icon className prefix | *string* | `van-icon` | | icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` |
| tag | HTML Tag | *string* | `button` | | tag | HTML Tag | _string_ | `button` |
| native-type | Native Type Attribute | *string* | `''` | | native-type | Native Type Attribute | _string_ | `''` |
| plain | Whether to be plain button | *boolean* | `false` | | plain | Whether to be plain button | _boolean_ | `false` |
| block | Whether to set display block | *boolean* | `false` | | block | Whether to set display block | _boolean_ | `false` |
| round | Whether to be round button | *boolean* | `false` | | round | Whether to be round button | _boolean_ | `false` |
| square | Whether to be square button | *boolean* | `false` | | square | Whether to be square button | _boolean_ | `false` |
| disabled | Whether to disable button | *boolean* | `false` | | disabled | Whether to disable button | _boolean_ | `false` |
| loading | Whether show loading status | *boolean* | `false` | | loading | Whether show loading status | _boolean_ | `false` |
| loading-text | Loading text | *string* | - | | loading-text | Loading text | _string_ | - |
| loading-type | Loading type, can be set to `spinner` | *string* | `circular` | | loading-type | Loading type, can be set to `spinner` | _string_ | `circular` |
| loading-size | Loading icon size | *string* | `20px` | | loading-size | Loading icon size | _string_ | `20px` |
| url | Link URL | *string* | - | | url | Link URL | _string_ | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| click | Triggered when click button and not disabled or loading | *event: Event* | | click | Triggered when click button and not disabled or loading | _event: Event_ |
| touchstart | Triggered when touch start | *event: TouchEvent* | | touchstart | Triggered when touch start | _event: TouchEvent_ |

58
src/button/README.zh-CN.md
View File

@ -76,7 +76,9 @@ Vue.use(Button);
```html ```html
<van-button icon="star-o" type="primary" /> <van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button> <van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button> <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>按钮</van-button
>
``` ```
### 按钮尺寸 ### 按钮尺寸
@ -114,7 +116,9 @@ Vue.use(Button);
```html ```html
<van-button color="#7232dd">单色按钮</van-button> <van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button> <van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>渐变色按钮</van-button
>
``` ```
## API ## API
@ -122,32 +126,32 @@ Vue.use(Button);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| type | 类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | | type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| size | 尺寸，可选值为 `large` `small` `mini` | *string* | `normal` | | size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` |
| text | 按钮文字 | *string* | - | | text | 按钮文字 | _string_ | - |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | | color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| tag | 根节点的 HTML 标签 | *string* | `button` | | tag | 根节点的 HTML 标签 | _string_ | `button` |
| native-type | 原生 button 标签的 type 属性 | *string* | - | | native-type | 原生 button 标签的 type 属性 | _string_ | - |
| block | 是否为块级元素 | *boolean* | `false` | | block | 是否为块级元素 | _boolean_ | `false` |
| plain | 是否为朴素按钮 | *boolean* | `false` | | plain | 是否为朴素按钮 | _boolean_ | `false` |
| square | 是否为方形按钮 | *boolean* | `false` | | square | 是否为方形按钮 | _boolean_ | `false` |
| round | 是否为圆形按钮 | *boolean* | `false` | | round | 是否为圆形按钮 | _boolean_ | `false` |
| disabled | 是否禁用按钮 | *boolean* | `false` | | disabled | 是否禁用按钮 | _boolean_ | `false` |
| hairline | 是否使用 0.5px 边框 | *boolean* | `false` | | hairline | 是否使用 0.5px 边框 | _boolean_ | `false` |
| loading | 是否显示为加载状态 | *boolean* | `false` | | loading | 是否显示为加载状态 | _boolean_ | `false` |
| loading-text | 加载状态提示文字 | *string* | - | | loading-text | 加载状态提示文字 | _string_ | - |
| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | *string* | `circular` | | loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | _string_ | `circular` |
| loading-size | 加载图标大小 | *string* | `20px` | | loading-size | 加载图标大小 | _string_ | `20px` |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ---------- | ---------------------------------------- | ------------------- |
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | *event: Event* | | click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ |
| touchstart | 开始触摸按钮时触发 | *event: TouchEvent* | | touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ |

130
src/calendar/README.md
View File

@ -29,7 +29,7 @@ export default {
data() { data() {
return { return {
date: '', date: '',
show: false show: false,
}; };
}, },
methods: { methods: {
@ -39,8 +39,8 @@ export default {
onConfirm(date) { onConfirm(date) {
this.show = false; this.show = false;
this.date = this.formatDate(date); this.date = this.formatDate(date);
} },
} },
}; };
``` ```
@ -56,15 +56,15 @@ export default {
data() { data() {
return { return {
text: '', text: '',
show: false show: false,
}; };
}, },
methods: { methods: {
onConfirm(date) { onConfirm(date) {
this.show = false; this.show = false;
this.text = `${date.length} dates selected`; this.text = `${date.length} dates selected`;
} },
} },
}; };
``` ```
@ -82,7 +82,7 @@ export default {
data() { data() {
return { return {
date: '', date: '',
show: false show: false,
}; };
}, },
methods: { methods: {
@ -93,8 +93,8 @@ export default {
const [start, end] = date; const [start, end] = date;
this.show = false; this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`; this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
} },
} },
}; };
``` ```
@ -119,11 +119,7 @@ Use `color` prop to custom calendar color
Use `min-date` and `max-date` to custom date range Use `min-date` and `max-date` to custom date range
```html ```html
<van-calendar <van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
``` ```
```js ```js
@ -132,9 +128,9 @@ export default {
return { return {
show: false, show: false,
minDate: new Date(2010, 0, 1), minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31) maxDate: new Date(2010, 0, 31),
}; };
} },
}; };
``` ```
@ -156,11 +152,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text
Use `formatter` to custom day text Use `formatter` to custom day text
```html ```html
<van-calendar <van-calendar v-model="show" type="range" :formatter="formatter" />
v-model="show"
type="range"
:formatter="formatter"
/>
``` ```
```js ```js
@ -187,9 +179,9 @@ export default {
} }
return day; return day;
} },
} },
} };
``` ```
### Custom Position ### Custom Position
@ -197,11 +189,7 @@ export default {
Use `position` to custom popup position，can be set to `top`、`left`、`right` Use `position` to custom popup position，can be set to `top`、`left`、`right`
```html ```html
<van-calendar <van-calendar v-model="show" :round="false" position="right" />
v-model="show"
:round="false"
position="right"
/>
``` ```
### Max Range ### Max Range
@ -209,11 +197,7 @@ Use `position` to custom popup position，can be set to `top`、`left`、`right`
When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days
```html ```html
<van-calendar <van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
``` ```
### Tiled display ### Tiled display
@ -234,35 +218,35 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| type `v2.5.4` | Type，can be set to `range` `multiple` | *string* | `single` | | type `v2.5.4` | Type，can be set to `range` `multiple` | _string_ | `single` |
| title | Title of calendar | *string* | `Calendar` | | title | Title of calendar | _string_ | `Calendar` |
| color | Color for the bottom button and selected date | *string* | `#ee0a24` | | color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
| min-date | Min date | *Date* | Today | | min-date | Min date | _Date_ | Today |
| max-date | Max date | *Date* | Six months after the today | | max-date | Max date | _Date_ | Six months after the today |
| default-date | Default selected date | *Date \| Date[]* | Today | | default-date | Default selected date | _Date \| Date[]_ | Today |
| row-height | Row height | *number \| string* | `64` | | row-height | Row height | _number \| string_ | `64` |
| formatter | Day formatter | *(day: Day) => Day* | - | | formatter | Day formatter | _(day: Day) => Day_ | - |
| poppable | Whether to show the calendar inside a popup | *boolean* | `true` | | poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
| show-mark | Whether to show background month mark | *boolean* | `true` | | show-mark | Whether to show background month mark | _boolean_ | `true` |
| show-title `v2.5.5` | Whether to show title | *boolean* | `true` | | show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
| show-subtitle `v2.5.5` | Whether to show subtitle | *boolean* | `true` | | show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
| show-confirm | Whether to show confirm button | *boolean* | `true` | | show-confirm | Whether to show confirm button | _boolean_ | `true` |
| confirm-text | Confirm button text | *string* | `Confirm` | | confirm-text | Confirm button text | _string_ | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` | | confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
### Poppable Props ### Poppable Props
Following props are supported when the poppable is true Following props are supported when the poppable is true
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Whether to show calendar | *boolean* | `false` | | v-model | Whether to show calendar | _boolean_ | `false` |
| position | Popup position, can be set to `top` `right` `left` | *string* | `bottom` | | position | Popup position, can be set to `top` `right` `left` | _string_ | `bottom` |
| round | Whether to show round corner | *boolean* | `true` | | round | Whether to show round corner | _boolean_ | `true` |
| close-on-popstate `v2.4.4` | Whether to close when popstate | *boolean* | `false` | | close-on-popstate `v2.4.4` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - | | get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - |
### Range Props ### Range Props
@ -270,28 +254,28 @@ Following props are supported when the poppable is true
Following props are supported when the type is range Following props are supported when the type is range
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| max-range `v2.4.3` | Number of selectable days | *number \| string* | - | | max-range `v2.4.3` | Number of selectable days | _number \| string_ | - |
| range-prompt `v2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` | | range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | *boolean* | `fasle` | | allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` |
### Data Structure of Day ### Data Structure of Day
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | --- | --- | --- |
| date | Date | *Date* | | date | Date | _Date_ |
| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | *string* | | type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | Text | *string* | | text | Text | _string_ |
| topInfo | Top info | *string* | | topInfo | Top info | _string_ |
| bottomInfo | Bottom info | *string* | | bottomInfo | Bottom info | _string_ |
| className | Extra className | *string* | | className | Extra className | _string_ |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| select | Triggered when select date | *value: Date \| Date[]* | | select | Triggered when select date | _value: Date \| Date[]_ |
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | *value: Date \| Date[]* | | confirm | Triggered after date selection is complete，if `show-confirm` is`true`, it is triggered after clicking the confirm button | _value: Date \| Date[]_ |
| open `v2.5.2` | Triggered when open Popup | - | | open `v2.5.2` | Triggered when open Popup | - |
| close `v2.5.2` | Triggered when close Popup | - | | close `v2.5.2` | Triggered when close Popup | - |
| opened `v2.5.2` | Triggered when opened Popup | - | | opened `v2.5.2` | Triggered when opened Popup | - |
@ -300,7 +284,7 @@ Following props are supported when the type is range
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------ | ------------- |
| title | Custom title | | title | Custom title |
| footer | Custom fotter | | footer | Custom fotter |
@ -309,5 +293,5 @@ Following props are supported when the type is range
Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ----- | ----------------------------------- | --------- | ------------ |
| reset | Reset selected date to default date | - | - | | reset | Reset selected date to default date | - | - |

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

@ -29,7 +29,7 @@ export default {
data() { data() {
return { return {
date: '', date: '',
show: false show: false,
}; };
}, },
methods: { methods: {
@ -39,8 +39,8 @@ export default {
onConfirm(date) { onConfirm(date) {
this.show = false; this.show = false;
this.date = this.formatDate(date); this.date = this.formatDate(date);
} },
} },
}; };
``` ```
@ -58,15 +58,15 @@ export default {
data() { data() {
return { return {
text: '', text: '',
show: false show: false,
}; };
}, },
methods: { methods: {
onConfirm(date) { onConfirm(date) {
this.show = false; this.show = false;
this.text = `选择了 ${date.length} 个日期`; this.text = `选择了 ${date.length} 个日期`;
} },
} },
}; };
``` ```
@ -84,7 +84,7 @@ export default {
data() { data() {
return { return {
date: '', date: '',
show: false show: false,
}; };
}, },
methods: { methods: {
@ -95,8 +95,8 @@ export default {
const [start, end] = date; const [start, end] = date;
this.show = false; this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`; this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
} },
} },
}; };
``` ```
@ -121,11 +121,7 @@ export default {
通过`min-date`和`max-date`定义日历的范围 通过`min-date`和`max-date`定义日历的范围
```html ```html
<van-calendar <van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
``` ```
```js ```js
@ -134,9 +130,9 @@ export default {
return { return {
show: false, show: false,
minDate: new Date(2010, 0, 1), minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31) maxDate: new Date(2010, 0, 31),
}; };
} },
}; };
``` ```
@ -158,11 +154,7 @@ export default {
通过传入`formatter`函数来对日历上每一格的内容进行格式化 通过传入`formatter`函数来对日历上每一格的内容进行格式化
```html ```html
<van-calendar <van-calendar v-model="show" type="range" :formatter="formatter" />
v-model="show"
type="range"
:formatter="formatter"
/>
``` ```
```js ```js
@ -189,9 +181,9 @@ export default {
} }
return day; return day;
} },
} },
} };
``` ```
### 自定义弹出位置 ### 自定义弹出位置
@ -199,11 +191,7 @@ export default {
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right` 通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
```html ```html
<van-calendar <van-calendar v-model="show" :round="false" position="right" />
v-model="show"
:round="false"
position="right"
/>
``` ```
### 日期区间最大范围 ### 日期区间最大范围
@ -211,11 +199,7 @@ export default {
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案 选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
```html ```html
<van-calendar <van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
``` ```
### 平铺展示 ### 平铺展示
@ -236,66 +220,66 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| type `v2.5.4` | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | *string* | `single` | | type `v2.5.4` | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
| title | 日历标题 | *string* | `日期选择` | | title | 日历标题 | _string_ | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| min-date | 可选择的最小日期 | *Date* | 当前日期 | | min-date | 可选择的最小日期 | _Date_ | 当前日期 |
| max-date | 可选择的最大日期 | *Date* | 当前日期的六个月后 | | max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | *Date \| Date[]* | 今天 | | default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 |
| row-height | 日期行高 | *number \| string* | `64` | | row-height | 日期行高 | _number \| string_ | `64` |
| formatter | 日期格式化函数 | *(day: Day) => Day* | - | | formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | | poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
| show-mark | 是否显示月份背景水印 | *boolean* | `true` | | show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
| show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` | | show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | *boolean* | `true` | | show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |
| show-confirm | 是否展示确认按钮 | *boolean* | `true` | | show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
| confirm-text | 确认按钮的文字 | *string* | `确定` | | confirm-text | 确认按钮的文字 | _string_ | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
### Poppable Props ### Poppable Props
当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props: 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 是否显示日历弹窗 | *boolean* | `false` | | v-model | 是否显示日历弹窗 | _boolean_ | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` | | position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
| round | 是否显示圆角弹窗 | *boolean* | `true` | | round | 是否显示圆角弹窗 | _boolean_ | `true` |
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | | get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Range Props ### Range Props
当 Canlendar 的 `type` 为 `range` 时，支持以下 props: 当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - | | max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` | | range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | *boolean* | `fasle` | | allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
### Day 数据结构 ### Day 数据结构
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | --- | --- | --- |
| date | 日期对应的 Date 对象 | *Date* | | date | 日期对应的 Date 对象 | _Date_ |
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | *string* | | type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | 中间显示的文字 | *string* | | text | 中间显示的文字 | _string_ |
| topInfo | 上方的提示信息 | *string* | | topInfo | 上方的提示信息 | _string_ |
| bottomInfo | 下方的提示信息 | *string* | | bottomInfo | 下方的提示信息 | _string_ |
| className | 额外类名 | *string* | | className | 额外类名 | _string_ |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| select | 点击任意日期时触发 | *value: Date \| Date[]* | | select | 点击任意日期时触发 | _value: Date \| Date[]_ |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* | | confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
| open `v2.5.2` | 打开弹出层时触发 | - | | open `v2.5.2` | 打开弹出层时触发 | - |
| close `v2.5.2` | 关闭弹出层时触发 | - | | close `v2.5.2` | 关闭弹出层时触发 | - |
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - | | opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
@ -304,7 +288,7 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------ | ------------------ |
| title | 自定义标题 | | title | 自定义标题 |
| footer | 自定义底部区域内容 | | footer | 自定义底部区域内容 |
@ -313,7 +297,7 @@ export default {
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | ------ | ---------------------- | ---- | ------ |
| reset | 重置选中的日期到默认值 | - | - | | reset | 重置选中的日期到默认值 | - | - |
## 常见问题 ## 常见问题

32
src/card/README.md
View File

@ -65,30 +65,30 @@ Use slot to custom content.
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| thumb | Left thumb image URL | *string* | - | | thumb | Left thumb image URL | _string_ | - |
| title | Title | *string* | - | | title | Title | _string_ | - |
| desc | Description | *string* | - | | desc | Description | _string_ | - |
| tag | Tag | *string* | - | | tag | Tag | _string_ | - |
| num | number | *number \| string* | - | | num | number | _number \| string_ | - |
| price | Price | *number \| string* | - | | price | Price | _number \| string_ | - |
| origin-price | Origin price | *number \| string* | - | | origin-price | Origin price | _number \| string_ | - |
| centered | Whether content vertical centered | *boolean* | `false` | | centered | Whether content vertical centered | _boolean_ | `false` |
| currency | Currency symbol | *string* | `¥` | | currency | Currency symbol | _string_ | `¥` |
| thumb-link | Thumb link URL | *string* | - | | thumb-link | Thumb link URL | _string_ | - |
| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----------- | ---------------------------- | -------------- |
| click | Triggered when clicked | *event: Event* | | click | Triggered when clicked | _event: Event_ |
| click-thumb | Triggered when thumb clicked | *event: Event* | | click-thumb | Triggered when thumb clicked | _event: Event_ |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------------ | ------------------- |
| title | Custom title | | title | Custom title |
| desc | Custom description | | desc | Custom description |
| num | Custom num | | num | Custom num |

32
src/card/README.zh-CN.md
View File

@ -67,30 +67,30 @@ Vue.use(Card);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| thumb | 左侧图片 URL | *string* | - | | thumb | 左侧图片 URL | _string_ | - |
| title | 标题 | *string* | - | | title | 标题 | _string_ | - |
| desc | 描述 | *string* | - | | desc | 描述 | _string_ | - |
| tag | 图片角标 | *string* | - | | tag | 图片角标 | _string_ | - |
| num | 商品数量 | *number \| string* | - | | num | 商品数量 | _number \| string_ | - |
| price | 商品价格 | *number \| string* | - | | price | 商品价格 | _number \| string_ | - |
| origin-price | 商品划线原价 | *number \| string* | - | | origin-price | 商品划线原价 | _number \| string_ | - |
| centered | 内容是否垂直居中 | *boolean* | `false` | | centered | 内容是否垂直居中 | _boolean_ | `false` |
| currency | 货币符号 | *string* | `¥` | | currency | 货币符号 | _string_ | `¥` |
| thumb-link | 点击左侧图片后跳转的链接地址 | *string* | - | | thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - |
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ----------- | -------------------- | -------------- |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |
| click-thumb | 点击自定义图片时触发 | *event: Event* | | click-thumb | 点击自定义图片时触发 | _event: Event_ |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------------ | ---------------------- |
| title | 自定义标题 | | title | 自定义标题 |
| desc | 自定义描述 | | desc | 自定义描述 |
| num | 自定义数量 | | num | 自定义数量 |

66
src/cell/README.md
View File

@ -26,7 +26,12 @@ Vue.use(CellGroup);
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="Cell title" value="Content" size="large" /> <van-cell title="Cell title" value="Content" size="large" />
<van-cell title="Cell title" value="Content" size="large" label="Description" /> <van-cell
title="Cell title"
value="Content"
size="large"
label="Description"
/>
</van-cell-group> </van-cell-group>
``` ```
@ -90,10 +95,7 @@ Vue.use(CellGroup);
<van-cell title="单元格" icon="shop-o"> <van-cell title="单元格" icon="shop-o">
<!-- Use the right-icon slot to customize the right icon --> <!-- Use the right-icon slot to customize the right icon -->
<template #right-icon> <template #right-icon>
<van-icon <van-icon name="search" style="line-height: inherit;" />
name="search"
style="line-height: inherit;"
/>
</template> </template>
</van-cell> </van-cell>
``` ```
@ -109,51 +111,51 @@ Vue.use(CellGroup);
### CellGroup Props ### CellGroup Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --------- | ---------------------------- | --------- | ------- |
| title | Group title | *string* | - | | title | Group title | _string_ | - |
| border | Whether to show outer border | *boolean* | `true` | | border | Whether to show outer border | _boolean_ | `true` |
### Cell Props ### Cell Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| title | Title | *number \| string* | - | | title | Title | _number \| string_ | - |
| value | Right text | *number \| string* | - | | value | Right text | _number \| string_ | - |
| label | Description below the title | *string* | - | | label | Description below the title | _string_ | - |
| size | Size，can be set to `large` | *string* | - | | size | Size，can be set to `large` | _string_ | - |
| icon | Left Icon | *string* | - | | icon | Left Icon | _string_ | - |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
| border | Whether to show inner border | *boolean* | `true` | | border | Whether to show inner border | _boolean_ | `true` |
| center | Whether to center content vertically | *boolean* | `true` | | center | Whether to center content vertically | _boolean_ | `true` |
| url | Link URL | *string* | - | | url | Link URL | _string_ | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
| is-link | Whether to show link icon | *boolean* | `false` | | is-link | Whether to show link icon | _boolean_ | `false` |
| required | Whether to show required mark | *boolean* | `false` | | required | Whether to show required mark | _boolean_ | `false` |
| arrow-direction | Can be set to `left` `up` `down` | *string* | `right` | | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
| title-style | Title style | *any* | - | | title-style | Title style | _any_ | - |
| title-class | Title className | *any* | - | | title-class | Title className | _any_ | - |
| value-class | Value className | *any* | - | | value-class | Value className | _any_ | - |
| label-class | Label className | *any* | - | | label-class | Label className | _any_ | - |
### Cell Events ### Cell Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ------------------------- | -------------- |
| click | Triggered when click cell | *event: Event* | | click | Triggered when click cell | _event: Event_ |
### CellGroup Slots ### CellGroup Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------ |
| default | Default slot | | default | Default slot |
| title | Custom title | | title | Custom title |
### Cell Slots ### Cell Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ----------------- |
| default | Custom value | | default | Custom value |
| icon | Custom icon | | icon | Custom icon |
| title | Custom title | | title | Custom title |

60
src/cell/README.zh-CN.md
View File

@ -96,10 +96,7 @@ Vue.use(CellGroup);
<van-cell title="单元格" icon="shop-o"> <van-cell title="单元格" icon="shop-o">
<!-- 使用 right-icon 插槽来自定义右侧图标 --> <!-- 使用 right-icon 插槽来自定义右侧图标 -->
<template #right-icon> <template #right-icon>
<van-icon <van-icon name="search" style="line-height: inherit;" />
name="search"
style="line-height: inherit;"
/>
</template> </template>
</van-cell> </van-cell>
``` ```
@ -112,57 +109,56 @@ Vue.use(CellGroup);
<van-cell center title="单元格" value="内容" label="描述信息" /> <van-cell center title="单元格" value="内容" label="描述信息" />
``` ```
## API ## API
### CellGroup Props ### CellGroup Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------ | -------------- | --------- | ------ |
| title | 分组标题 | *string* | `-` | | title | 分组标题 | _string_ | `-` |
| border | 是否显示外边框 | *boolean* | `true` | | border | 是否显示外边框 | _boolean_ | `true` |
### Cell Props ### Cell Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| title | 左侧标题 | *number \| string* | - | | title | 左侧标题 | _number \| string_ | - |
| value | 右侧内容 | *number \| string* | - | | value | 右侧内容 | _number \| string_ | - |
| label | 标题下方的描述信息 | *string* | - | | label | 标题下方的描述信息 | _string_ | - |
| size | 单元格大小，可选值为 `large` | *string* | - | | size | 单元格大小，可选值为 `large` | _string_ | - |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| border | 是否显示内边框 | *boolean* | `true` | | border | 是否显示内边框 | _boolean_ | `true` |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
| clickable | 是否开启点击反馈 | *boolean* | `false` | | clickable | 是否开启点击反馈 | _boolean_ | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
| required | 是否显示表单必填星号 | *boolean* | `false` | | required | 是否显示表单必填星号 | _boolean_ | `false` |
| center | 是否使内容垂直居中 | *boolean* | `false` | | center | 是否使内容垂直居中 | _boolean_ | `false` |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
| title-style | 左侧标题额外样式 | *any* | - | | title-style | 左侧标题额外样式 | _any_ | - |
| title-class | 左侧标题额外类名 | *any* | - | | title-class | 左侧标题额外类名 | _any_ | - |
| value-class | 右侧内容额外类名 | *any* | - | | value-class | 右侧内容额外类名 | _any_ | - |
| label-class | 描述信息额外类名 | *any* | - | | label-class | 描述信息额外类名 | _any_ | - |
### Cell Events ### Cell Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------- | -------------- |
| click | 点击单元格时触发 | *event: Event* | | click | 点击单元格时触发 | _event: Event_ |
### CellGroup Slots ### CellGroup Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------- |
| default | 默认插槽 | | default | 默认插槽 |
| title | 自定义分组标题 | | title | 自定义分组标题 |
### Cell Slots ### Cell Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | ----------------------------- |
| default | 自定义右侧内容 | | default | 自定义右侧内容 |
| title | 自定义左侧标题 | | title | 自定义左侧标题 |
| label | 自定义标题下方描述 | | label | 自定义标题下方描述 |

88
src/checkbox/README.md
View File

@ -22,9 +22,9 @@ Vue.use(CheckboxGroup);
export default { export default {
data() { data() {
return { return {
checked: true checked: true,
}; };
} },
}; };
``` ```
@ -60,12 +60,8 @@ Use icon slot to custom icon
<van-checkbox v-model="checked"> <van-checkbox v-model="checked">
customize icon customize icon
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template> </template>
</van-checkbox> </van-checkbox>
<style> <style>
@ -81,9 +77,9 @@ export default {
return { return {
checked: true, checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
} },
}; };
``` ```
@ -108,9 +104,9 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
export default { export default {
data() { data() {
return { return {
result: ['a', 'b'] result: ['a', 'b'],
}; };
} },
}; };
``` ```
@ -127,9 +123,9 @@ export default {
export default { export default {
data() { data() {
return { return {
result: [] result: [],
}; };
} },
}; };
``` ```
@ -160,8 +156,8 @@ export default {
export default { export default {
data() { data() {
return { return {
result: [] result: [],
} };
}, },
methods: { methods: {
checkAll() { checkAll() {
@ -169,9 +165,9 @@ export default {
}, },
toggleAll() { toggleAll() {
this.$refs.checkboxGroup.toggleAll(); this.$refs.checkboxGroup.toggleAll();
} },
} },
} };
``` ```
### Inside a Cell ### Inside a Cell
@ -215,60 +211,60 @@ export default {
### Checkbox Props ### Checkbox Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | Check status | *boolean* | `false` | | v-model (value) | Check status | _boolean_ | `false` |
| name | Checkbox name | *any* | - | | name | Checkbox name | _any_ | - |
| shape | Can be set to `square` | *string* | `round` | | shape | Can be set to `square` | _string_ | `round` |
| disabled | Disable checkbox | *boolean* | `false` | | disabled | Disable checkbox | _boolean_ | `false` |
| label-disabled | Whether to disable label click | *boolean* | `false` | | label-disabled | Whether to disable label click | _boolean_ | `false` |
| label-position | Can be set to `left` | *string* | `right` | | label-position | Can be set to `left` | _string_ | `right` |
| icon-size | Icon size | *number \| string* | `20px` | | icon-size | Icon size | _number \| string_ | `20px` |
| checked-color | Checked color | *string* | `#1989fa` | - | | checked-color | Checked color | _string_ | `#1989fa` | - |
| bind-group `v2.2.4` | Whether to bind with CheckboxGroup | *boolean* | `true` | | bind-group `v2.2.4` | Whether to bind with CheckboxGroup | _boolean_ | `true` |
### CheckboxGroup Props ### CheckboxGroup Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | Names of all checked checkboxes | *any[]* | - | | v-model (value) | Names of all checked checkboxes | _any[]_ | - |
| disabled | Whether to disable all checkboxes | *boolean* | `false` | | disabled | Whether to disable all checkboxes | _boolean_ | `false` |
| max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) | | max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) |
| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` | | direction `v2.5.0` | Direction, can be set to `horizontal` | _string_ | `vertical` |
| icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` | | icon-size `v2.2.3` | Icon size of all checkboxes | _number \| string_ | `20px` |
| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - | | checked-color `v2.2.3` | Checked color of all checkboxes | _string_ | `#1989fa` | - |
### Checkbox Events ### Checkbox Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------ | ----------------------------- | ------------------ |
| change | Triggered when value changed | *checked: boolean* | | change | Triggered when value changed | _checked: boolean_ |
| click | Triggered when click checkbox | *event: Event* | | click | Triggered when click checkbox | _event: Event_ |
### CheckboxGroup Events ### CheckboxGroup Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------ | ---------------------------- | -------------- |
| change | Triggered when value changed | *names: any[]* | | change | Triggered when value changed | _names: any[]_ |
### Checkbox Slots ### Checkbox Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
|------|------|------| | ------- | ------------ | ------------------ |
| default | Custom label | - | | default | Custom label | - |
| icon | Custom icon | *checked: boolean* | | icon | Custom icon | _checked: boolean_ |
### CheckboxGroup Methods ### CheckboxGroup Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | --- | --- | --- | --- |
| toggleAll | Toggle check status of all checkboxes | *checked?: boolean* | - | | toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
### Checkbox Methods ### Checkbox Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ------ | ------------------- | ------------------- | ------------ |
| toggle | Toggle check status | *checked?: boolean* | - | | toggle | Toggle check status | _checked?: boolean_ | - |

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

@ -24,9 +24,9 @@ Vue.use(CheckboxGroup);
export default { export default {
data() { data() {
return { return {
checked: true checked: true,
}; };
} },
}; };
``` ```
@ -70,12 +70,8 @@ export default {
<van-checkbox v-model="checked"> <van-checkbox v-model="checked">
自定义图标 自定义图标
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template> </template>
</van-checkbox> </van-checkbox>
<style> <style>
@ -91,10 +87,10 @@ export default {
return { return {
checked: true, checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
} };
} },
} };
``` ```
### 禁用文本点击 ### 禁用文本点击
@ -120,9 +116,9 @@ export default {
export default { export default {
data() { data() {
return { return {
result: ['a', 'b'] result: ['a', 'b'],
}; };
} },
}; };
``` ```
@ -141,9 +137,9 @@ export default {
export default { export default {
data() { data() {
return { return {
result: [] result: [],
}; };
} },
}; };
``` ```
@ -178,8 +174,8 @@ export default {
export default { export default {
data() { data() {
return { return {
result: [] result: [],
} };
}, },
methods: { methods: {
checkAll() { checkAll() {
@ -187,9 +183,9 @@ export default {
}, },
toggleAll() { toggleAll() {
this.$refs.checkboxGroup.toggleAll(); this.$refs.checkboxGroup.toggleAll();
} },
} },
} };
``` ```
### 搭配单元格组件使用 ### 搭配单元格组件使用
@ -219,15 +215,15 @@ export default {
data() { data() {
return { return {
list: ['a', 'b'], list: ['a', 'b'],
result: [] result: [],
}; };
}, },
methods: { methods: {
toggle(index) { toggle(index) {
this.$refs.checkboxes[index].toggle(); this.$refs.checkboxes[index].toggle();
} },
} },
} };
``` ```
## API ## API
@ -235,60 +231,60 @@ export default {
### Checkbox Props ### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 是否为选中状态 | *boolean* | `false` | | v-model (value) | 是否为选中状态 | _boolean_ | `false` |
| name | 标识符 | *any* | - | | name | 标识符 | _any_ | - |
| shape | 形状，可选值为 `square` | *string* | `round` | | shape | 形状，可选值为 `square` | _string_ | `round` |
| disabled | 是否禁用复选框 | *boolean* | `false` | | disabled | 是否禁用复选框 | _boolean_ | `false` |
| label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` | | label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` |
| label-position | 文本位置，可选值为 `left` | *string* | `right` | | label-position | 文本位置，可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小，默认单位为`px` | *number \| string* | `20px` | | icon-size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | *string* | `#1989fa` | | checked-color | 选中状态颜色 | _string_ | `#1989fa` |
| bind-group `v2.2.4` | 是否与复选框组绑定 | *boolean* | `true` | | bind-group `v2.2.4` | 是否与复选框组绑定 | _boolean_ | `true` |
### CheckboxGroup Props ### CheckboxGroup Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 所有选中项的标识符 | *any[]* | - | | v-model (value) | 所有选中项的标识符 | _any[]_ | - |
| disabled | 是否禁用所有复选框 | *boolean* | `false` | | disabled | 是否禁用所有复选框 | _boolean_ | `false` |
| max | 最大可选数，`0`为无限制 | *number \| string* | `0` | | max | 最大可选数，`0`为无限制 | _number \| string_ | `0` |
| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` | | direction `v2.5.0` | 排列方向，可选值为`horizontal` | _string_ | `vertical` |
| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` | | icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | _number \| string_ | `20px` |
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` | | checked-color `v2.2.3` | 所有复选框的选中状态颜色 | _string_ | `#1989fa` |
### Checkbox Events ### Checkbox Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------------ | ------------------ |
| change | 当绑定值变化时触发的事件 | *checked: boolean* | | change | 当绑定值变化时触发的事件 | _checked: boolean_ |
| click | 点击复选框时触发 | *event: Event* | | click | 点击复选框时触发 | _event: Event_ |
### CheckboxGroup Events ### CheckboxGroup Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------------ | -------------- |
| change | 当绑定值变化时触发的事件 | *names: any[]* | | change | 当绑定值变化时触发的事件 | _names: any[]_ |
### Checkbox Slots ### Checkbox Slots
| 名称 | 说明 | SlotProps | | 名称 | 说明 | SlotProps |
|------|------|------| | ------- | ---------- | ------------------ |
| default | 自定义文本 | - | | default | 自定义文本 | - |
| icon | 自定义图标 | *checked: boolean* | | icon | 自定义图标 | _checked: boolean_ |
### CheckboxGroup 方法 ### CheckboxGroup 方法
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - | | toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
### Checkbox 方法 ### Checkbox 方法
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - | | toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |

47
src/circle/README.md
View File

@ -14,26 +14,21 @@ Vue.use(Circle);
### Basic Usage ### Basic Usage
```html ```html
<van-circle <van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
v-model="currentRate"
:rate="30"
:speed="100"
:text="text"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentRate: 0 currentRate: 0,
}; };
}, },
computed: { computed: {
text() { text() {
return this.currentRate.toFixed(0) + '%' return this.currentRate.toFixed(0) + '%';
} },
} },
}; };
``` ```
@ -77,10 +72,10 @@ export default {
currentRate: 0, currentRate: 0,
gradientColor: { gradientColor: {
'0%': '#3fecff', '0%': '#3fecff',
'100%': '#6149f6' '100%': '#6149f6',
} },
}; };
} },
}; };
``` ```
@ -111,21 +106,21 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Current rate | *number* | - | | v-model | Current rate | _number_ | - |
| rate | Target rate | *number \| string* | `100` | | rate | Target rate | _number \| string_ | `100` |
| size | Circle size | *number \| string* | `100px` | | size | Circle size | _number \| string_ | `100px` |
| color `v2.1.4` | Progress color, passing object to render gradient | *string \| object* | `#1989fa` | | color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` |
| layer-color | Layer color | *string* | `white` | | layer-color | Layer color | _string_ | `white` |
| fill | Fill color | *string* | `none` | | fill | Fill color | _string_ | `none` |
| speed | Animate speed（rate/s）| *number \| string* | `0` | | speed | Animate speed（rate/s） | _number \| string_ | `0` |
| text | Text | *string* | - | | text | Text | _string_ | - |
| stroke-width | Stroke width | *number \| string* | `40` | | stroke-width | Stroke width | _number \| string_ | `40` |
| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | *string* | `round` | | stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` |
| clockwise | Whether to be clockwise | *boolean* | `true` | | clockwise | Whether to be clockwise | _boolean_ | `true` |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------------- |
| default | custom text content | | default | custom text content |

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

@ -16,26 +16,21 @@ Vue.use(Circle);
`rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。 `rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。
```html ```html
<van-circle <van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
v-model="currentRate"
:rate="30"
:speed="100"
:text="text"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentRate: 0 currentRate: 0,
}; };
}, },
computed: { computed: {
text() { text() {
return this.currentRate.toFixed(0) + '%' return this.currentRate.toFixed(0) + '%';
} },
} },
}; };
``` ```
@ -85,10 +80,10 @@ export default {
currentRate: 0, currentRate: 0,
gradientColor: { gradientColor: {
'0%': '#3fecff', '0%': '#3fecff',
'100%': '#6149f6' '100%': '#6149f6',
} },
}; };
} },
}; };
``` ```
@ -110,12 +105,7 @@ export default {
通过`size`属性设置圆环直径 通过`size`属性设置圆环直径
```html ```html
<van-circle <van-circle v-model="currentRate" :rate="rate" size="120px" text="大小定制" />
v-model="currentRate"
:rate="rate"
size="120px"
text="大小定制"
/>
``` ```
## API ## API
@ -123,21 +113,21 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前进度 | *number* | - | | v-model | 当前进度 | _number_ | - |
| rate | 目标进度 | *number \| string* | `100` | | rate | 目标进度 | _number \| string_ | `100` |
| size | 圆环直径，默认单位为 `px` | *number \| string* | `100px` | | size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` |
| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | | color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` |
| layer-color | 轨道颜色 | *string* | `white` | | layer-color | 轨道颜色 | _string_ | `white` |
| fill | 填充颜色 | *string* | `none` | | fill | 填充颜色 | _string_ | `none` |
| speed | 动画速度（单位为 rate/s）| *number \| string* | `0` | | speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
| text | 文字 | *string* | - | | text | 文字 | _string_ | - |
| stroke-width | 进度条宽度 | *number \| string* | `40` | | stroke-width | 进度条宽度 | _number \| string_ | `40` |
| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | *string* | `round` | | stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` |
| clockwise | 是否顺时针增加 | *boolean* | `true` | | clockwise | 是否顺时针增加 | _boolean_ | `true` |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------- |
| default | 自定义文字内容 | | default | 自定义文字内容 |

30
src/col/README.md
View File

@ -38,12 +38,10 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
</van-row> </van-row>
``` ```
### Column Spacing ### Column Spacing
Set grid spacing using `gutter` attribute. The default value is 0 Set grid spacing using `gutter` attribute. The default value is 0
```html ```html
<van-row gutter="20"> <van-row gutter="20">
<van-col span="8">span: 8</van-col> <van-col span="8">span: 8</van-col>
@ -93,29 +91,29 @@ Setting `type` to `flex` to enable flex layout
### Row Props ### Row Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| type | Layout type, can be set to `flex` | *string* | - | | type | Layout type, can be set to `flex` | _string_ | - |
| gutter | Grid spacing（px） | *number \| string* | - | | gutter | Grid spacing（px） | _number \| string_ | - |
| tag | Custom element tag | *string* | `div` | | tag | Custom element tag | _string_ | `div` |
| justify | Flex main axis，can be set to end/center/space-around/space-between | *string* | `start` | | justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |
| align | Flex cross axis, be set to center/bottom | *string* | `top` | | align | Flex cross axis, be set to center/bottom | _string_ | `top` |
### Col Props ### Col Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| span | number of column the grid spans | *number \| string* | - | | span | number of column the grid spans | _number \| string_ | - |
| offset | number of spacing on the left side of the grid | *number \| string* | - | | offset | number of spacing on the left side of the grid | _number \| string_ | - |
| tag | Custom element tag | *string* | `div` | | tag | Custom element tag | _string_ | `div` |
### Row Events ### Row Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ------------------------ | -------------- |
| click | Triggered when click row | *event: Event* | | click | Triggered when click row | _event: Event_ |
### Col Events ### Col Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ------------------------ | -------------- |
| click | Triggered when click col | *event: Event* | | click | Triggered when click col | _event: Event_ |

28
src/col/README.zh-CN.md
View File

@ -96,29 +96,29 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
### Row Props ### Row Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| type | 布局方式，可选值为`flex` | *string* | - | | type | 布局方式，可选值为`flex` | _string_ | - |
| gutter | 列元素之间的间距（单位为px） | *number \| string* | - | | gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
| tag | 自定义元素标签 | *string* | `div` | | tag | 自定义元素标签 | _string_ | `div` |
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | *string* | `start` | | justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | *string* | `top` | | align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
### Col Props ### Col Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------ | -------------- | ------------------ | ------ |
| span | 列元素宽度 | *number \| string* | - | | span | 列元素宽度 | _number \| string_ | - |
| offset | 列元素偏移距离 | *number \| string* | - | | offset | 列元素偏移距离 | _number \| string_ | - |
| tag | 自定义元素标签 | *string* | `div` | | tag | 自定义元素标签 | _string_ | `div` |
### Row Events ### Row Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------- | -------------- |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |
### Col Events ### Col Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------- | -------------- |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |

54
src/collapse/README.md
View File

@ -20,7 +20,9 @@ Use `v-model` to control the name of active panels
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item title="Title1" name="1">Content</van-collapse-item> <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
<van-collapse-item title="Title2" name="2">Content</van-collapse-item> <van-collapse-item title="Title2" name="2">Content</van-collapse-item>
<van-collapse-item title="Title3" name="3" disabled>Content</van-collapse-item> <van-collapse-item title="Title3" name="3" disabled
>Content</van-collapse-item
>
</van-collapse> </van-collapse>
``` ```
@ -28,9 +30,9 @@ Use `v-model` to control the name of active panels
export default { export default {
data() { data() {
return { return {
activeNames: ['1'] activeNames: ['1'],
}; };
} },
}; };
``` ```
@ -50,9 +52,9 @@ In accordion mode, only one panel can be expanded at the same time.
export default { export default {
data() { data() {
return { return {
activeName: '1' activeName: '1',
}; };
} },
}; };
``` ```
@ -76,9 +78,9 @@ export default {
export default { export default {
data() { data() {
return { return {
activeNames: ['1'] activeNames: ['1'],
}; };
} },
}; };
``` ```
@ -87,38 +89,38 @@ export default {
### Collapse Props ### Collapse Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Names of current active panels | accordion mode： *number \| string*<br>non-accordion mode：*(number \| string)[]* | - | | v-model | Names of current active panels | accordion mode： _number \| string_<br>non-accordion mode：_(number \| string)[]_ | - |
| accordion | Whether to be accordion mode | *boolean* | `false` | | accordion | Whether to be accordion mode | _boolean_ | `false` |
| border | Whether to show outer border | *boolean* | `true` | | border | Whether to show outer border | _boolean_ | `true` |
### Collapse Events ### Collapse Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | --------------------------- | ----------- |
| change | Triggered when switch panel | activeNames | | change | Triggered when switch panel | activeNames |
### CollapseItem Props ### CollapseItem Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| name | Name | *number \| string* | `index` | | name | Name | _number \| string_ | `index` |
| icon | Left Icon | *string* | - | | icon | Left Icon | _string_ | - |
| size | Title size，can be set to `large` | *string* | - | | size | Title size，can be set to `large` | _string_ | - |
| title | Title | *number \| string* | - | | title | Title | _number \| string_ | - |
| value | Right text | *number \| string* | - | | value | Right text | _number \| string_ | - |
| label | Description below the title | *string* | - | | label | Description below the title | _string_ | - |
| border | Whether to show inner border | *boolean* | `true` | | border | Whether to show inner border | _boolean_ | `true` |
| disabled | Whether to disabled collapse | *boolean* | `false` | | disabled | Whether to disabled collapse | _boolean_ | `false` |
| is-link | Whether to show link icon | *boolean* | `true` | | is-link | Whether to show link icon | _boolean_ | `true` |
| title-class | Title className | *string* | - | | title-class | Title className | _string_ | - |
| value-class | Value className | *string* | - | | value-class | Value className | _string_ | - |
| label-class | Label className | *string* | - | | label-class | Label className | _string_ | - |
### CollapseItem Slots ### CollapseItem Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ----------------- |
| default | Content | | default | Content |
| value | Custom value | | value | Custom value |
| icon | Custom icon | | icon | Custom icon |

50
src/collapse/README.zh-CN.md
View File

@ -28,9 +28,9 @@ Vue.use(CollapseItem);
export default { export default {
data() { data() {
return { return {
activeNames: ['1'] activeNames: ['1'],
}; };
} },
}; };
``` ```
@ -50,9 +50,9 @@ export default {
export default { export default {
data() { data() {
return { return {
activeName: '1' activeName: '1',
}; };
} },
}; };
``` ```
@ -76,9 +76,9 @@ export default {
export default { export default {
data() { data() {
return { return {
activeNames: ['1'] activeNames: ['1'],
}; };
} },
}; };
``` ```
@ -87,38 +87,38 @@ export default {
### Collapse Props ### Collapse Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前展开面板的 name | 手风琴模式：*number \| string*<br>非手风琴模式：*(number \| string)[]* | - | | v-model | 当前展开面板的 name | 手风琴模式：_number \| string_<br>非手风琴模式：_(number \| string)[]_ | - |
| accordion | 是否开启手风琴模式 | *boolean* | `false` | | accordion | 是否开启手风琴模式 | _boolean_ | `false` |
| border | 是否显示外边框 | *boolean* | `true` | | border | 是否显示外边框 | _boolean_ | `true` |
### Collapse Events ### Collapse Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | ---------------------------------------- |
| change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 | | change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 |
### CollapseItem Props ### CollapseItem Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| name | 唯一标识符，默认为索引值 | *number \| string* | `index` | | name | 唯一标识符，默认为索引值 | _number \| string_ | `index` |
| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| size | 标题栏大小，可选值为 `large` | *string* | - | | size | 标题栏大小，可选值为 `large` | _string_ | - |
| title | 标题栏左侧内容 | *number \| string* | - | | title | 标题栏左侧内容 | _number \| string_ | - |
| value | 标题栏右侧内容 | *number \| string* | - | | value | 标题栏右侧内容 | _number \| string_ | - |
| label | 标题栏描述信息 | *number \| string* | - | | label | 标题栏描述信息 | _number \| string_ | - |
| border | 是否显示内边框 | *boolean* | `true` | | border | 是否显示内边框 | _boolean_ | `true` |
| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | *boolean* | `true` | | is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` |
| disabled | 是否禁用面板 | *boolean* | `false` | | disabled | 是否禁用面板 | _boolean_ | `false` |
| title-class | 左侧标题额外类名 | *string* | - | | title-class | 左侧标题额外类名 | _string_ | - |
| value-class | 右侧内容额外类名 | *string* | - | | value-class | 右侧内容额外类名 | _string_ | - |
| label-class | 描述信息额外类名 | *string* | - | | label-class | 描述信息额外类名 | _string_ | - |
### CollapseItem Slots ### CollapseItem Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | ----------------------------- |
| default | 面板内容 | | default | 面板内容 |
| value | 自定义显示内容 | | value | 自定义显示内容 |
| icon | 自定义`icon` | | icon | 自定义`icon` |

77
src/contact-card/README.md
View File

@ -55,11 +55,13 @@ export default {
showList: false, showList: false,
showEdit: false, showEdit: false,
isEdit: false, isEdit: false,
list: [{ list: [
{
name: 'John Snow', name: 'John Snow',
tel: '13000000000', tel: '13000000000',
id: 0 id: 0,
}] },
],
}; };
}, },
@ -70,8 +72,8 @@ export default {
currentContact() { currentContact() {
const id = this.chosenContactId; const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {}; return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
} },
}, },
methods: { methods: {
@ -100,7 +102,9 @@ export default {
this.showList = false; this.showList = false;
if (this.isEdit) { if (this.isEdit) {
this.list = this.list.map(item => item.id === info.id ? info : item); this.list = this.list.map((item) =>
item.id === info.id ? info : item
);
} else { } else {
this.list.push(info); this.list.push(info);
} }
@ -110,12 +114,12 @@ export default {
// delete contact // delete contact
onDelete(info) { onDelete(info) {
this.showEdit = false; this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id); this.list = this.list.filter((item) => item.id !== info.id);
if (this.chosenContactId === info.id) { if (this.chosenContactId === info.id) {
this.chosenContactId = null; this.chosenContactId = null;
} }
} },
} },
}; };
``` ```
@ -135,60 +139,59 @@ export default {
### ContactCard Props ### ContactCard Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --------- | -------------------------- | -------- | ------------------ |
| type | Can be set to `add` `edit` | *string* | `add` | | type | Can be set to `add` `edit` | _string_ | `add` |
| name | Name | *string* | - | | name | Name | _string_ | - |
| tel | Phone | *string* | - | | tel | Phone | _string_ | - |
| add-text | Add card text | *string* | `Add contact info` | | add-text | Add card text | _string_ | `Add contact info` |
### ContactCard Events ### ContactCard Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ---------------------- | -------------- |
| click | Triggered when clicked | *event: Event* | | click | Triggered when clicked | _event: Event_ |
### ContactList Props ### ContactList Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Id of chosen contact | *number \| string* | - | | v-model | Id of chosen contact | _number \| string_ | - |
| list | Contact list | *Contact[]* | `[]` | | list | Contact list | _Contact[]_ | `[]` |
| add-text | Add button text | *string* | `Add new contact` | | add-text | Add button text | _string_ | `Add new contact` |
| default-tag-text `v2.3.0` | Default tag text | *string* | - | | default-tag-text `v2.3.0` | Default tag text | _string_ | - |
### ContactList Events ### ContactList Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | -------------------------------- | --------------------------- |
| add | Triggered when click add button | - | | add | Triggered when click add button | - |
| edit | Triggered when click edit button | item: contact object，index | | edit | Triggered when click edit button | item: contact object，index |
| select | Triggered when select contact | item: contact object | | select | Triggered when select contact | item: contact object |
### ContactEdit Props ### ContactEdit Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| contact-info | Contact Info | *object* | `[]` | | contact-info | Contact Info | _object_ | `[]` |
| is-edit | Whether is editing | *boolean* | `false` | | is-edit | Whether is editing | _boolean_ | `false` |
| is-saving | Whether to show save button loading status | *boolean* | `false` | | is-saving | Whether to show save button loading status | _boolean_ | `false` |
| is-deleting | Whether to show delete button loading status | *boolean* | `false` | | is-deleting | Whether to show delete button loading status | _boolean_ | `false` |
| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | | tel-validator | The method to validate tel | _(tel: string) => boolean_ | - |
| show-set-default `v2.3.0` | Whether to show default contact switch | *boolean* | `false` | | show-set-default `v2.3.0` | Whether to show default contact switch | _boolean_ | `false` |
| set-default-label `v2.3.0` | default contact switch label | *string* | - | | set-default-label `v2.3.0` | default contact switch label | _string_ | - |
### ContactEdit Events ### ContactEdit Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | ---------------------------------- | --------------------- |
| save | Triggered when click save button | content：contact info | | save | Triggered when click save button | content：contact info |
| delete | Triggered when click delete button | content：contact info | | delete | Triggered when click delete button | content：contact info |
### Data Structure of Contact ### Data Structure of Contact
| key | Description | Type | | key | Description | Type |
|------|------|------| | --------- | ------------------ | ------------------ |
| id | ID | *number \| string* | | id | ID | _number \| string_ |
| name | Name | *string* | | name | Name | _string_ |
| tel | Phone | *string* | | tel | Phone | _string_ |
| isDefault | Is default contact | *boolean* | | isDefault | Is default contact | _boolean_ |

83
src/contact-card/README.zh-CN.md
View File

@ -59,11 +59,13 @@ export default {
showList: false, showList: false,
showEdit: false, showEdit: false,
isEdit: false, isEdit: false,
list: [{ list: [
{
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
id: 0 id: 0,
}] },
],
}; };
}, },
@ -74,8 +76,8 @@ export default {
currentContact() { currentContact() {
const id = this.chosenContactId; const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {}; return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
} },
}, },
methods: { methods: {
@ -104,7 +106,9 @@ export default {
this.showList = false; this.showList = false;
if (this.isEdit) { if (this.isEdit) {
this.list = this.list.map(item => item.id === info.id ? info : item); this.list = this.list.map((item) =>
item.id === info.id ? info : item
);
} else { } else {
this.list.push(info); this.list.push(info);
} }
@ -114,24 +118,19 @@ export default {
// 删除联系人 // 删除联系人
onDelete(info) { onDelete(info) {
this.showEdit = false; this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id); this.list = this.list.filter((item) => item.id !== info.id);
if (this.chosenContactId === info.id) { if (this.chosenContactId === info.id) {
this.chosenContactId = null; this.chosenContactId = null;
} }
} },
} },
}; };
``` ```
### 不可编辑 ### 不可编辑
```html ```html
<van-contact-card <van-contact-card type="edit" name="张三" tel="13000000000" :editable="false" />
type="edit"
name="张三"
tel="13000000000"
:editable="false"
/>
``` ```
## API ## API
@ -139,31 +138,31 @@ export default {
### ContactCard Props ### ContactCard Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | -------- | --------------------------- | -------- | -------------------- |
| type | 类型，可选值为 `add` `edit` | *string* | `add` | | type | 类型，可选值为 `add` `edit` | _string_ | `add` |
| name | 联系人姓名 | *string* | - | | name | 联系人姓名 | _string_ | - |
| tel | 联系人手机号 | *string* | - | | tel | 联系人手机号 | _string_ | - |
| add-text | 添加时的文案提示 | *string* | `添加订单联系人信息` | | add-text | 添加时的文案提示 | _string_ | `添加订单联系人信息` |
### ContactCard Events ### ContactCard Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------- | -------------- |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |
### ContactList Props ### ContactList Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前选中联系人的 id | *number \| string* | - | | v-model | 当前选中联系人的 id | _number \| string_ | - |
| list | 联系人列表 | *Contact[]* | `[]` | | list | 联系人列表 | _Contact[]_ | `[]` |
| add-text | 新建按钮文案 | *string* | `新建联系人` | | add-text | 新建按钮文案 | _string_ | `新建联系人` |
| default-tag-text `v2.3.0` | 默认联系人标签文案 | *string* | - | | default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - |
### ContactList Events ### ContactList Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------------- | --------------------------------- |
| add | 点击新增按钮时触发 | - | | add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 | | edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 | | select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
@ -171,27 +170,27 @@ export default {
### ContactEdit Props ### ContactEdit Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| contact-info | 联系人信息 | *object* | `[]` | | contact-info | 联系人信息 | _object_ | `[]` |
| is-edit | 是否为编辑联系人 | *boolean* | `false` | | is-edit | 是否为编辑联系人 | _boolean_ | `false` |
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | | is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | | is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | | tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - |
| show-set-default `v2.3.0` | 是否显示默认联系人栏 | *boolean* | `false` | | show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` |
| set-default-label `v2.3.0` | 默认联系人栏文案 | *string* | - | | set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - |
### ContactEdit Events ### ContactEdit Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------ | ----------------- |
| save | 点击保存按钮时触发 | content：表单内容 | | save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 | | delete | 点击删除按钮时触发 | content：表单内容 |
### Contact 数据结构 ### Contact 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | --------- | -------------------- | ------------------ |
| id | 每位联系人的唯一标识 | *number \| string* | | id | 每位联系人的唯一标识 | _number \| string_ |
| name | 联系人姓名 | *string* | | name | 联系人姓名 | _string_ |
| tel | 联系人手机号 | *number \| string* | | tel | 联系人手机号 | _number \| string_ |
| isDefault | 是否为默认联系人 | *boolean* | | isDefault | 是否为默认联系人 | _boolean_ |

46
src/count-down/README.md
View File

@ -21,10 +21,10 @@ Vue.use(CountDown);
export default { export default {
data() { data() {
return { return {
time: 30 * 60 * 60 * 1000 time: 30 * 60 * 60 * 1000,
};
},
}; };
}
}
``` ```
### Custom Format ### Custom Format
@ -97,9 +97,9 @@ export default {
}, },
finish() { finish() {
Toast('Finished'); Toast('Finished');
} },
} },
} };
``` ```
## API ## API
@ -107,16 +107,16 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| time | Total time | *number \| string* | `0` | | time | Total time | _number \| string_ | `0` |
| format | Time format | *string* | `HH:mm:ss` | | format | Time format | _string_ | `HH:mm:ss` |
| auto-start | Whether to auto start count down | *boolean* | `true` | | auto-start | Whether to auto start count down | _boolean_ | `true` |
| millisecond | Whether to enable millisecond render | *boolean* | `false` | | millisecond | Whether to enable millisecond render | _boolean_ | `false` |
### Available formats ### Available formats
| Format | Description | | Format | Description |
|------|------| | ------ | --------------------- |
| DD | Day | | DD | Day |
| HH | Hour | | HH | Hour |
| mm | Minute | | mm | Minute |
@ -128,32 +128,32 @@ export default {
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --------------- | ---------------------------------- | -------------------- |
| finish | Triggered when count down finished | - | | finish | Triggered when count down finished | - |
| change `v2.4.4` | Triggered when count down changed | *timeData: TimeData* | | change `v2.4.4` | Triggered when count down changed | _timeData: TimeData_ |
### Slots ### Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
|------|------|------| | ------- | -------------- | -------------------- |
| default | Custom Content | *timeData: TimeData* | | default | Custom Content | _timeData: TimeData_ |
### TimeData Structure ### TimeData Structure
| Name | Description | Type | | Name | Description | Type |
|------|------|------| | ------------ | ------------------- | -------- |
| days | Remain days | *number* | | days | Remain days | _number_ |
| hours | Remain hours | *number* | | hours | Remain hours | _number_ |
| minutes | Remain minutes | *number* | | minutes | Remain minutes | _number_ |
| seconds | Remain seconds | *number* | | seconds | Remain seconds | _number_ |
| milliseconds | Remain milliseconds | *number* | | milliseconds | Remain milliseconds | _number_ |
### Methods ### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ----- | ---------------- | --------- | ------------ |
| start | Start count down | - | - | | start | Start count down | - | - |
| pause | Pause count down | - | - | | pause | Pause count down | - | - |
| reset | Reset count down | - | - | | reset | Reset count down | - | - |

46
src/count-down/README.zh-CN.md
View File

@ -23,10 +23,10 @@ Vue.use(CountDown);
export default { export default {
data() { data() {
return { return {
time: 30 * 60 * 60 * 1000 time: 30 * 60 * 60 * 1000,
};
},
}; };
}
}
``` ```
### 自定义格式 ### 自定义格式
@ -107,9 +107,9 @@ export default {
}, },
finish() { finish() {
Toast('倒计时结束'); Toast('倒计时结束');
} },
} },
} };
``` ```
## API ## API
@ -117,16 +117,16 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ----------- | -------------------- | ------------------ | ---------- |
| time | 倒计时时长，单位毫秒 | *number \| string* | `0` | | time | 倒计时时长，单位毫秒 | _number \| string_ | `0` |
| format | 时间格式 | *string* | `HH:mm:ss` | | format | 时间格式 | _string_ | `HH:mm:ss` |
| auto-start | 是否自动开始倒计时 | *boolean* | `true` | | auto-start | 是否自动开始倒计时 | _boolean_ | `true` |
| millisecond | 是否开启毫秒级渲染 | *boolean* | `false` | | millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` |
### format 格式 ### format 格式
| 格式 | 说明 | | 格式 | 说明 |
|------|------| | ---- | ------------ |
| DD | 天数 | | DD | 天数 |
| HH | 小时 | | HH | 小时 |
| mm | 分钟 | | mm | 分钟 |
@ -138,32 +138,32 @@ export default {
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --------------- | ---------------- | -------------------- |
| finish | 倒计时结束时触发 | - | | finish | 倒计时结束时触发 | - |
| change `v2.4.4` | 倒计时变化时触发 | *timeData: TimeData* | | change `v2.4.4` | 倒计时变化时触发 | _timeData: TimeData_ |
### Slots ### Slots
| 名称 | 说明 | SlotProps | | 名称 | 说明 | SlotProps |
|------|------|------| | ------- | ---------- | -------------------- |
| default | 自定义内容 | *timeData: TimeData* | | default | 自定义内容 | _timeData: TimeData_ |
### TimeData 格式 ### TimeData 格式
| 名称 | 说明 | 类型 | | 名称 | 说明 | 类型 |
|------|------|------| | ------------ | -------- | -------- |
| days | 剩余天数 | *number* | | days | 剩余天数 | _number_ |
| hours | 剩余小时 | *number* | | hours | 剩余小时 | _number_ |
| minutes | 剩余分钟 | *number* | | minutes | 剩余分钟 | _number_ |
| seconds | 剩余秒数 | *number* | | seconds | 剩余秒数 | _number_ |
| milliseconds | 剩余毫秒 | *number* | | milliseconds | 剩余毫秒 | _number_ |
### 方法 ### 方法
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| start | 开始倒计时 | - | - | | start | 开始倒计时 | - | - |
| pause | 暂停倒计时 | - | - | | pause | 暂停倒计时 | - | - |
| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - | | reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - |

84
src/coupon-list/README.md
View File

@ -48,7 +48,7 @@ const coupon = {
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元' unitDesc: '元',
}; };
export default { export default {
@ -56,8 +56,8 @@ export default {
return { return {
chosenCoupon: -1, chosenCoupon: -1,
coupons: [coupon], coupons: [coupon],
disabledCoupons: [coupon] disabledCoupons: [coupon],
} };
}, },
methods: { methods: {
onChange(index) { onChange(index) {
@ -66,9 +66,9 @@ export default {
}, },
onExchange(code) { onExchange(code) {
this.coupons.push(coupon); this.coupons.push(coupon);
} },
} },
} };
``` ```
## API ## API
@ -76,53 +76,53 @@ export default {
### CouponCell Props ### CouponCell Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| title | Cell title | *string* | `Coupon` | | title | Cell title | _string_ | `Coupon` |
| chosen-coupon | Index of chosen coupon | *number \| string* | `-1` | | chosen-coupon | Index of chosen coupon | _number \| string_ | `-1` |
| coupons | Coupon list | *Coupon[]* | `[]` | | coupons | Coupon list | _Coupon[]_ | `[]` |
| editable | Cell editable | *boolean* | `true` | | editable | Cell editable | _boolean_ | `true` |
| border | Whether to show innner border | *boolean* | `true` | | border | Whether to show innner border | _boolean_ | `true` |
| currency | Currency symbol | *string* | `¥` | | currency | Currency symbol | _string_ | `¥` |
### CouponList Props ### CouponList Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Current exchange code | *string* | - | | v-model | Current exchange code | _string_ | - |
| chosen-coupon | Index of chosen coupon | *number* | `-1` | | chosen-coupon | Index of chosen coupon | _number_ | `-1` |
| coupons | Coupon list | *Coupon[]* | `[]` | | coupons | Coupon list | _Coupon[]_ | `[]` |
| disabled-coupons | Disabled coupon list | *Coupon[]* | `[]` | | disabled-coupons | Disabled coupon list | _Coupon[]_ | `[]` |
| enabled-title | Title of coupon list | *string* | `Available` | - | | enabled-title | Title of coupon list | _string_ | `Available` | - |
| disabled-title | Title of disabled coupon list | *string* | `Unavailable` | - | | disabled-title | Title of disabled coupon list | _string_ | `Unavailable` | - |
| exchange-button-text | Exchange button text | *string* | `Exchange` | | exchange-button-text | Exchange button text | _string_ | `Exchange` |
| exchange-button-loading | Whether to show loading in exchange button | *boolean* | `false` | | exchange-button-loading | Whether to show loading in exchange button | _boolean_ | `false` |
| exchange-button-disabled | Whether to disable exchange button | *boolean* | `false` | | exchange-button-disabled | Whether to disable exchange button | _boolean_ | `false` |
| exchange-min-length | Min length to enable exchange button | *number* | `1` | | exchange-min-length | Min length to enable exchange button | _number_ | `1` |
| displayed-coupon-index | Index of displayed coupon | *number* | - | | displayed-coupon-index | Index of displayed coupon | _number_ | - |
| close-button-text | Close button text | *string* | `Close` | | close-button-text | Close button text | _string_ | `Close` |
| input-placeholder | Input placeholder | *string* | `Coupon code` | | input-placeholder | Input placeholder | _string_ | `Coupon code` |
| currency | Currency symbol | *string* | `¥` | | currency | Currency symbol | _string_ | `¥` |
| empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | | empty-image | Placeholder image when list is empty | _string_ | `https://img.yzcdn.cn/vant/coupon-empty.png` |
| show-count `v2.3.0` | Whether to show coupon count in tab title | *boolean* | `true` | | show-count `v2.3.0` | Whether to show coupon count in tab title | _boolean_ | `true` |
### CouponList Events ### CouponList Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| change | Triggered when change chosen coupon | index: index of chosen coupon | | change | Triggered when change chosen coupon | index: index of chosen coupon |
| exchange | Triggered when exchange coupon | code: exchange code | | exchange | Triggered when exchange coupon | code: exchange code |
### Data Structure of Coupon ### Data Structure of Coupon
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | ----------- | ----------------------------------- | -------- |
| id | Id | *string* | | id | Id | _string_ |
| name | Name | *string* | | name | Name | _string_ |
| condition | Condition | *string* | | condition | Condition | _string_ |
| startAt | Start time (Timestmap, unit second) | *number* | | startAt | Start time (Timestmap, unit second) | _number_ |
| endAt | End time (Timestmap, unit second) | *number* | | endAt | End time (Timestmap, unit second) | _number_ |
| description | Description | *string* | | description | Description | _string_ |
| reason | Unavailable reason | *string* | | reason | Unavailable reason | _string_ |
| value | Value | *number* | | value | Value | _number_ |
| valueDesc | Value Text | *string* | | valueDesc | Value Text | _string_ |
| unitDesc | Unit Text | *string* | | unitDesc | Unit Text | _string_ |

88
src/coupon-list/README.zh-CN.md
View File

@ -48,7 +48,7 @@ const coupon = {
startAt: 1489104000, startAt: 1489104000,
endAt: 1514592000, endAt: 1514592000,
valueDesc: '1.5', valueDesc: '1.5',
unitDesc: '元' unitDesc: '元',
}; };
export default { export default {
@ -56,8 +56,8 @@ export default {
return { return {
chosenCoupon: -1, chosenCoupon: -1,
coupons: [coupon], coupons: [coupon],
disabledCoupons: [coupon] disabledCoupons: [coupon],
} };
}, },
methods: { methods: {
onChange(index) { onChange(index) {
@ -66,9 +66,9 @@ export default {
}, },
onExchange(code) { onExchange(code) {
this.coupons.push(coupon); this.coupons.push(coupon);
} },
} },
} };
``` ```
## API ## API
@ -76,55 +76,55 @@ export default {
### CouponCell Props ### CouponCell Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------------- | -------------------- | ------------------ | -------- |
| title | 单元格标题 | *string* | `优惠券` | | title | 单元格标题 | _string_ | `优惠券` |
| chosen-coupon | 当前选中优惠券的索引 | *number \| string* | `-1` | | chosen-coupon | 当前选中优惠券的索引 | _number \| string_ | `-1` |
| coupons | 可用优惠券列表 | *Coupon[]* | `[]` | | coupons | 可用优惠券列表 | _Coupon[]_ | `[]` |
| editable | 能否切换优惠券 | *boolean* | `true` | | editable | 能否切换优惠券 | _boolean_ | `true` |
| border | 是否显示内边框 | *boolean* | `true` | | border | 是否显示内边框 | _boolean_ | `true` |
| currency | 货币符号 | *string* | `¥` | - | | currency | 货币符号 | _string_ | `¥` | - |
### CouponList Props ### CouponList Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前输入的兑换码 | *string* | - | | v-model | 当前输入的兑换码 | _string_ | - |
| chosen-coupon | 当前选中优惠券的索引 | *number* | `-1` | | chosen-coupon | 当前选中优惠券的索引 | _number_ | `-1` |
| coupons | 可用优惠券列表 | *Coupon[]* | `[]` | | coupons | 可用优惠券列表 | _Coupon[]_ | `[]` |
| disabled-coupons | 不可用优惠券列表 | *Coupon[]* | `[]` | | disabled-coupons | 不可用优惠券列表 | _Coupon[]_ | `[]` |
| enabled-title | 可用优惠券列表标题 | *string* | `可使用优惠券` | | enabled-title | 可用优惠券列表标题 | _string_ | `可使用优惠券` |
| disabled-title | 不可用优惠券列表标题 | *string* | `不可使用优惠券` | | disabled-title | 不可用优惠券列表标题 | _string_ | `不可使用优惠券` |
| exchange-button-text | 兑换按钮文字 | *string* | `兑换` | | exchange-button-text | 兑换按钮文字 | _string_ | `兑换` |
| exchange-button-loading | 是否显示兑换按钮加载动画 | *boolean* | `false` | | exchange-button-loading | 是否显示兑换按钮加载动画 | _boolean_ | `false` |
| exchange-button-disabled | 是否禁用兑换按钮 | *boolean* | `false` | | exchange-button-disabled | 是否禁用兑换按钮 | _boolean_ | `false` |
| exchange-min-length | 兑换码最小长度 | *number* | `1` | | exchange-min-length | 兑换码最小长度 | _number_ | `1` |
| displayed-coupon-index | 滚动至特定优惠券位置 | *number* | - | | displayed-coupon-index | 滚动至特定优惠券位置 | _number_ | - |
| show-close-button | 是否显示列表底部按钮 | *boolean* | `true` | | show-close-button | 是否显示列表底部按钮 | _boolean_ | `true` |
| close-button-text | 列表底部按钮文字 | *string* | `不使用优惠` | | close-button-text | 列表底部按钮文字 | _string_ | `不使用优惠` |
| input-placeholder | 输入框文字提示 | *string* | `请输入优惠码` | | input-placeholder | 输入框文字提示 | _string_ | `请输入优惠码` |
| show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | | show-exchange-bar | 是否展示兑换栏 | _boolean_ | `true` |
| currency | 货币符号 | *string* | `¥` | | currency | 货币符号 | _string_ | `¥` |
| empty-image `v2.1.0` | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | | empty-image `v2.1.0` | 列表为空时的占位图 | _string_ | `https://img.yzcdn.cn/vant/coupon-empty.png` |
| show-count `v2.3.0` | 是否展示可用 / 不可用数量 | *boolean* | `true` | | show-count `v2.3.0` | 是否展示可用 / 不可用数量 | _boolean_ | `true` |
### CouponList Events ### CouponList Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | -------- | -------------- | ----------------------- |
| change | 优惠券切换回调 | index, 选中优惠券的索引 | | change | 优惠券切换回调 | index, 选中优惠券的索引 |
| exchange | 兑换优惠券回调 | code, 兑换码 | | exchange | 兑换优惠券回调 | code, 兑换码 |
### Coupon 数据结构 ### Coupon 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | ----------- | ------------------------------- | -------- |
| id | 优惠券 id | *string* | | id | 优惠券 id | _string_ |
| name | 优惠券名称 | *string* | | name | 优惠券名称 | _string_ |
| condition | 满减条件 | *string* | | condition | 满减条件 | _string_ |
| startAt | 卡有效开始时间 (时间戳, 单位秒) | *number* | | startAt | 卡有效开始时间 (时间戳, 单位秒) | _number_ |
| endAt | 卡失效日期 (时间戳, 单位秒) | *number* | | endAt | 卡失效日期 (时间戳, 单位秒) | _number_ |
| description | 描述信息，优惠券可用时展示 | *string* | | description | 描述信息，优惠券可用时展示 | _string_ |
| reason | 不可用原因，优惠券不可用时展示 | *string* | | reason | 不可用原因，优惠券不可用时展示 | _string_ |
| value | 折扣券优惠金额，单位分 | *number* | | value | 折扣券优惠金额，单位分 | _number_ |
| valueDesc | 折扣券优惠金额文案 | *string* | | valueDesc | 折扣券优惠金额文案 | _string_ |
| unitDesc | 单位文案 | *string* | | unitDesc | 单位文案 | _string_ |

86
src/datetime-picker/README.md
View File

@ -32,9 +32,9 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
}; };
} },
}; };
``` ```
@ -55,10 +55,10 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
};
},
}; };
}
}
``` ```
### Choose Year-Month ### Choose Year-Month
@ -79,7 +79,7 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
}; };
}, },
methods: { methods: {
@ -87,12 +87,12 @@ export default {
if (type === 'year') { if (type === 'year') {
return `${val} Year`; return `${val} Year`;
} else if (type === 'month') { } else if (type === 'month') {
return `${val} Month` return `${val} Month`;
} }
return val; return val;
} },
} },
} };
``` ```
### Choose Time ### Choose Time
@ -110,39 +110,35 @@ export default {
export default { export default {
data() { data() {
return { return {
currentTime: '12:00' currentTime: '12:00',
};
},
}; };
}
}
``` ```
### Option Filter ### Option Filter
```html ```html
<van-datetime-picker <van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
v-model="currentTime"
type="time"
:filter="filter"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentTime: '12:00' currentTime: '12:00',
}; };
}, },
methods: { methods: {
filter(type, options) { filter(type, options) {
if (type === 'minute') { if (type === 'minute') {
return options.filter(option => option % 5 === 0) return options.filter((option) => option % 5 === 0);
} }
return options; return options;
} },
} },
} };
``` ```
## API ## API
@ -150,43 +146,43 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| type | Can be set to `date` `time`<br> `year-month` | *string* | `datetime` | | type | Can be set to `date` `time`<br> `year-month` | _string_ | `datetime` |
| title | Toolbar title | *string* | `''` | | title | Toolbar title | _string_ | `''` |
| confirm-button-text | Text of confirm button | *string* | `Confirm` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | *string* | `Cancel` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` |
| show-toolbar | Whether to show toolbar | *boolean* | `true` | | show-toolbar | Whether to show toolbar | _boolean_ | `true` |
| loading | Whether to show loading prompt | *boolean* | `false` | | loading | Whether to show loading prompt | _boolean_ | `false` |
| filter | Option filter | *(type, vals) => vals* | - | | filter | Option filter | _(type, vals) => vals_ | - |
| formatter | Option text formatter | *(type, val) => val* | - | | formatter | Option text formatter | _(type, val) => val_ | - |
| item-height | Option height | *number \| string* | `44` | | item-height | Option height | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | *number \| string* | `5` | | visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | | swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
### DatePicker Props ### DatePicker Props
Following props are supported when the type is date or datetime Following props are supported when the type is date or datetime
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --------- | ----------- | ------ | ------------------------------ |
| min-date | Min date | *Date* | Ten years ago on January 1 | | min-date | Min date | _Date_ | Ten years ago on January 1 |
| max-date | Max date | *Date* | Ten years later on December 31 | | max-date | Max date | _Date_ | Ten years later on December 31 |
### TimePicker Props ### TimePicker Props
Following props are supported when the type is time Following props are supported when the type is time
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | ---------- | -------------------------- | ------------------ | ------- |
| min-hour | Min hour for `time` type | *number \| string* | `0` | | min-hour | Min hour for `time` type | _number \| string_ | `0` |
| max-hour | Max hour for `time` type | *number \| string* | `23` | | max-hour | Max hour for `time` type | _number \| string_ | `23` |
| min-minute | Max minute for `time` type | *number \| string* | `0` | | min-minute | Max minute for `time` type | _number \| string_ | `0` |
| max-minute | Max minute for `time` type | *number \| string* | `59` | | max-minute | Max minute for `time` type | _number \| string_ | `59` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------- | ----------------------------------- | ----------------------- |
| change | Triggered when value changed | picker: Picker instance | | change | Triggered when value changed | picker: Picker instance |
| confirm | Triggered when click confirm button | value: current value | | confirm | Triggered when click confirm button | value: current value |
| cancel | Triggered when click cancel button | - | | cancel | Triggered when click cancel button | - |
@ -196,5 +192,5 @@ Following props are supported when the type is time
Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ------------------ | ------------------- | --------- | ------------ |
| getPicker `v2.5.3` | get Picker instance | - | - | | getPicker `v2.5.3` | get Picker instance | - | - |

80
src/datetime-picker/README.zh-CN.md
View File

@ -32,9 +32,9 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
}; };
} },
}; };
``` ```
@ -55,9 +55,9 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
}; };
} },
}; };
``` ```
@ -81,7 +81,7 @@ export default {
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1), maxDate: new Date(2025, 10, 1),
currentDate: new Date() currentDate: new Date(),
}; };
}, },
methods: { methods: {
@ -89,12 +89,12 @@ export default {
if (type === 'year') { if (type === 'year') {
return `${val}年`; return `${val}年`;
} else if (type === 'month') { } else if (type === 'month') {
return `${val}月` return `${val}月`;
} }
return val; return val;
} },
} },
} };
``` ```
### 选择时间 ### 选择时间
@ -112,9 +112,9 @@ export default {
export default { export default {
data() { data() {
return { return {
currentTime: '12:00' currentTime: '12:00',
}; };
} },
}; };
``` ```
@ -123,29 +123,25 @@ export default {
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔 通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
```html ```html
<van-datetime-picker <van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
v-model="currentTime"
type="time"
:filter="filter"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentTime: '12:00' currentTime: '12:00',
}; };
}, },
methods: { methods: {
filter(type, options) { filter(type, options) {
if (type === 'minute') { if (type === 'minute') {
return options.filter(option => option % 5 === 0); return options.filter((option) => option % 5 === 0);
} }
return options; return options;
} },
} },
}; };
``` ```
@ -154,43 +150,43 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| type | 类型，可选值为 `date` <br> `time` `year-month` | *string* | `datetime` | | type | 类型，可选值为 `date` <br> `time` `year-month` | _string_ | `datetime` |
| title | 顶部栏标题 | *string* | `''` | | title | 顶部栏标题 | _string_ | `''` |
| confirm-button-text | 确认按钮文字 | *string* | `确认` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` |
| show-toolbar | 是否显示顶部栏 | *boolean* | `true` | | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
| loading | 是否显示加载状态 | *boolean* | `false` | | loading | 是否显示加载状态 | _boolean_ | `false` |
| filter | 选项过滤函数 | *(type, vals) => vals* | - | | filter | 选项过滤函数 | _(type, vals) => vals_ | - |
| formatter | 选项格式化函数 | *(type, val) => val* | - | | formatter | 选项格式化函数 | _(type, val) => val_ | - |
| item-height | 选项高度 | *number \| string* | `44` | | item-height | 选项高度 | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | *number \| string* | `5` | | visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | | swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
### DatePicker Props ### DatePicker Props
当时间选择器类型为 date 或 datetime 时，支持以下 props: 当时间选择器类型为 date 或 datetime 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | -------- | -------------------------- | ------ | ------ |
| min-date | 可选的最小时间，精确到分钟 | *Date* | 十年前 | | min-date | 可选的最小时间，精确到分钟 | _Date_ | 十年前 |
| max-date | 可选的最大时间，精确到分钟 | *Date* | 十年后 | | max-date | 可选的最大时间，精确到分钟 | _Date_ | 十年后 |
### TimePicker Props ### TimePicker Props
当时间选择器类型为 time 时，支持以下 props: 当时间选择器类型为 time 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ---------- | -------------- | ------------------ | ------ |
| min-hour | 可选的最小小时 | *number \| string* | `0` | | min-hour | 可选的最小小时 | _number \| string_ | `0` |
| max-hour | 可选的最大小时 | *number \| string* | `23` | | max-hour | 可选的最大小时 | _number \| string_ | `23` |
| min-minute | 可选的最小分钟 | *number \| string* | `0` | | min-minute | 可选的最小分钟 | _number \| string_ | `0` |
| max-minute | 可选的最大分钟 | *number \| string* | `59` | | max-minute | 可选的最大分钟 | _number \| string_ | `59` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------- | ------------------------ | --------------------- |
| change | 当值变化时触发的事件 | picker: Picker 实例 | | change | 当值变化时触发的事件 | picker: Picker 实例 |
| confirm | 点击完成按钮时触发的事件 | value: 当前选中的时间 | | confirm | 点击完成按钮时触发的事件 | value: 当前选中的时间 |
| cancel | 点击取消按钮时触发的事件 | - | | cancel | 点击取消按钮时触发的事件 | - |
@ -200,7 +196,7 @@ export default {
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| getPicker `v2.5.3` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - | | getPicker `v2.5.3` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
## 常见问题 ## 常见问题

120
src/dialog/README.md
View File

@ -18,13 +18,13 @@ Used to prompt for some messages, only including one confirm button
```js ```js
Dialog.alert({ Dialog.alert({
title: 'Title', title: 'Title',
message: 'Content' message: 'Content',
}).then(() => { }).then(() => {
// on close // on close
}); });
Dialog.alert({ Dialog.alert({
message: 'Content' message: 'Content',
}).then(() => { }).then(() => {
// on close // on close
}); });
@ -37,10 +37,12 @@ Used to confirm some messages, including a confirm button and a cancel button
```js ```js
Dialog.confirm({ Dialog.confirm({
title: 'Title', title: 'Title',
message: 'Content' message: 'Content',
}).then(() => { })
.then(() => {
// on confirm // on confirm
}).catch(() => { })
.catch(() => {
// on cancel // on cancel
}); });
``` ```
@ -59,22 +61,22 @@ function beforeClose(action, done) {
Dialog.confirm({ Dialog.confirm({
title: 'Title', title: 'Title',
message: 'Content', message: 'Content',
beforeClose beforeClose,
}); });
``` ```
### $dialog Method ### \$dialog Method
After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. After import the Dialog component, the \$dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
```js ```js
export default { export default {
mounted() { mounted() {
this.$dialog.alert({ this.$dialog.alert({
message: 'Content' message: 'Content',
}); });
} },
} };
``` ```
### Advanced Usage ### Advanced Usage
@ -83,7 +85,7 @@ If you need to render vue components within a dialog, you can use dialog compone
```html ```html
<van-dialog v-model="show" title="Title" show-cancel-button> <van-dialog v-model="show" title="Title" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg"> <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog> </van-dialog>
``` ```
@ -91,10 +93,10 @@ If you need to render vue components within a dialog, you can use dialog compone
export default { export default {
data() { data() {
return { return {
show: false show: false,
};
},
}; };
}
}
``` ```
## API ## API
@ -102,7 +104,7 @@ export default {
### Methods ### Methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | --- | --- | --- | --- |
| Dialog | Show dialog | `options` | `Promise` | | Dialog | Show dialog | `options` | `Promise` |
| Dialog.alert | Show alert dialog | `options` | `Promise` | | Dialog.alert | Show alert dialog | `options` | `Promise` |
| Dialog.confirm | Show confim dialog | `options` | `Promise` | | Dialog.confirm | Show confim dialog | `options` | `Promise` |
@ -113,58 +115,58 @@ export default {
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| title | Title | *string* | - | | title | Title | _string_ | - |
| width `v2.2.7` | Width | *number \| string* | `320px` | | width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | *string* | - | | message | Message | _string_ | - |
| messageAlign | Message text align，can be set to `left` `right` | *string* | `center` | | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
| className | Custom className | *any* | - | | className | Custom className | _any_ | - |
| showConfirmButton | Whether to show confirm button | *boolean* | `true` | | showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
| showCancelButton | Whether to show cancel button | *boolean* | `false` | | showCancelButton | Whether to show cancel button | _boolean_ | `false` |
| cancelButtonText | Cancel button text | *string* | `Cancel` | | cancelButtonText | Cancel button text | _string_ | `Cancel` |
| cancelButtonColor | Cancel button color | *string* | `black` | | cancelButtonColor | Cancel button color | _string_ | `black` |
| confirmButtonText | Confirm button text | *string* | `Confirm` | | confirmButtonText | Confirm button text | _string_ | `Confirm` |
| confirmButtonColor | Confirm button color | *string* | `#1989fa` | | confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
| overlay | Whether to show overlay | *boolean* | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| overlayClass `v2.2.7` | Custom overlay class | *string* | - | | overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
| overlayStyle `v2.2.7` | Custom overlay style | *object* | - | | overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
| closeOnPopstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` | | closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
| closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` | | closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
| lockScroll | Whether to lock body scroll | *boolean* | `true` | | lockScroll | Whether to lock body scroll | _boolean_ | `true` |
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | | beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | | transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
| getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` | | getContainer | Return the mount node for Dialog | _string \| () => Element_ | `body` |
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Whether to show dialog | *boolean* | - | | v-model | Whether to show dialog | _boolean_ | - |
| title | Title | *string* | - | | title | Title | _string_ | - |
| width `v2.2.7` | Width | *number \| string* | `320px` | | width `v2.2.7` | Width | _number \| string_ | `320px` |
| message | Message | *string* | - | | message | Message | _string_ | - |
| message-align | Message align，can be set to `left` `right` | *string* | `center` | | message-align | Message align，can be set to `left` `right` | _string_ | `center` |
| show-confirm-button | Whether to show confirm button | *boolean* | `true` | | show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
| show-cancel-button | Whether to show cancel button | *boolean* | `false` | | show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
| cancel-button-text | Cancel button text | *string* | `Cancel` | | cancel-button-text | Cancel button text | _string_ | `Cancel` |
| cancel-button-color | Cancel button color | *string* | `black` | | cancel-button-color | Cancel button color | _string_ | `black` |
| confirm-button-text | Confirm button text | *string* | `Confirm` | | confirm-button-text | Confirm button text | _string_ | `Confirm` |
| confirm-button-color | Confirm button color | *string* | `#1989fa` | | confirm-button-color | Confirm button color | _string_ | `#1989fa` |
| overlay | Whether to show overlay | *boolean* | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class `v2.2.7` | Custom overlay class | *string* | - | | overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
| overlay-style `v2.2.7` | Custom overlay style | *object* | - | | overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
| close-on-popstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` | | close-on-popstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` |
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - | | before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | | transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
| get-container | Return the mount node for Dialog | *string \| () => Element* | - | | get-container | Return the mount node for Dialog | _string \| () => Element_ | - |
### Events ### Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------- | ----------------------------------- | ---------- |
| confirm | Triggered when click confirm button | - | | confirm | Triggered when click confirm button | - |
| cancel | Triggered when click cancel button | - | | cancel | Triggered when click cancel button | - |
| open | Triggered when open Dialog | - | | open | Triggered when open Dialog | - |
@ -175,6 +177,6 @@ export default {
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | -------------- |
| default | Custom message | | default | Custom message |
| title | Custom title | | title | Custom title |

129
src/dialog/README.zh-CN.md
View File

@ -30,9 +30,9 @@ Vue.use(Dialog);
// 局部注册 // 局部注册
export default { export default {
components: { components: {
[Dialog.Component.name]: Dialog.Component [Dialog.Component.name]: Dialog.Component,
} },
} };
``` ```
## 代码演示 ## 代码演示
@ -44,13 +44,13 @@ export default {
```js ```js
Dialog.alert({ Dialog.alert({
title: '标题', title: '标题',
message: '弹窗内容' message: '弹窗内容',
}).then(() => { }).then(() => {
// on close // on close
}); });
Dialog.alert({ Dialog.alert({
message: '弹窗内容' message: '弹窗内容',
}).then(() => { }).then(() => {
// on close // on close
}); });
@ -63,10 +63,12 @@ Dialog.alert({
```js ```js
Dialog.confirm({ Dialog.confirm({
title: '标题', title: '标题',
message: '弹窗内容' message: '弹窗内容',
}).then(() => { })
.then(() => {
// on confirm // on confirm
}).catch(() => { })
.catch(() => {
// on cancel // on cancel
}); });
``` ```
@ -85,22 +87,22 @@ function beforeClose(action, done) {
Dialog.confirm({ Dialog.confirm({
title: '标题', title: '标题',
message: '弹窗内容', message: '弹窗内容',
beforeClose beforeClose,
}); });
``` ```
### 全局方法 ### 全局方法
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法 引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 \$dialog 方法，在所有组件内部都可以直接调用此方法
```js ```js
export default { export default {
mounted() { mounted() {
this.$dialog.alert({ this.$dialog.alert({
message: '弹窗内容' message: '弹窗内容',
}); });
} },
} };
``` ```
### 组件调用 ### 组件调用
@ -109,7 +111,7 @@ export default {
```html ```html
<van-dialog v-model="show" title="标题" show-cancel-button> <van-dialog v-model="show" title="标题" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg"> <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog> </van-dialog>
``` ```
@ -117,19 +119,18 @@ export default {
export default { export default {
data() { data() {
return { return {
show: false show: false,
};
},
}; };
}
}
``` ```
## API ## API
### 方法 ### 方法
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| Dialog | 展示弹窗 | `options` | `Promise` | | Dialog | 展示弹窗 | `options` | `Promise` |
| Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` | | Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` |
| Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` | | Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` |
@ -142,62 +143,62 @@ export default {
通过函数调用 `Dialog` 时，支持传入以下选项： 通过函数调用 `Dialog` 时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| title | 标题 | *string* | - | | title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` | | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | *string* | - | | message | 文本内容，支持通过`\n`换行 | _string_ | - |
| messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| className | 自定义类名 | *any* | - | | className | 自定义类名 | _any_ | - |
| showConfirmButton | 是否展示确认按钮 | *boolean* | `true` | | showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
| showCancelButton | 是否展示取消按钮 | *boolean* | `false` | | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
| confirmButtonText | 确认按钮文案 | *string* | `确认` | | confirmButtonText | 确认按钮文案 | _string_ | `确认` |
| confirmButtonColor | 确认按钮颜色 | *string* | `#1989fa` | | confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` |
| cancelButtonText | 取消按钮文案 | *string* | `取消` | | cancelButtonText | 取消按钮文案 | _string_ | `取消` |
| cancelButtonColor | 取消按钮颜色 | *string* | `black` | | cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | *boolean* | `true` | | overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlayClass `v2.2.7` | 自定义遮罩层类名 | *string* | - | | overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlayStyle `v2.2.7` | 自定义遮罩层样式 | *object* | - | | overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` | | closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | | closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lockScroll | 是否锁定背景滚动 | *boolean* | `true` | | lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | | beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | | transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | `body` | | getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
### Props ### Props
通过组件调用 `Dialog` 时，支持以下 Props： 通过组件调用 `Dialog` 时，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 是否显示弹窗 | *boolean* | - | | v-model | 是否显示弹窗 | _boolean_ | - |
| title | 标题 | *string* | - | | title | 标题 | _string_ | - |
| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` | | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
| message | 文本内容，支持通过`\n`换行 | *string* | - | | message | 文本内容，支持通过`\n`换行 | _string_ | - |
| message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` | | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
| show-confirm-button | 是否展示确认按钮 | *boolean* | `true` | | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
| show-cancel-button | 是否展示取消按钮 | *boolean* | `false` | | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
| confirm-button-text | 确认按钮文案 | *string* | `确认` | | confirm-button-text | 确认按钮文案 | _string_ | `确认` |
| confirm-button-color | 确认按钮颜色 | *string* | `#1989fa` | | confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` |
| cancel-button-text | 取消按钮文案 | *string* | `取消` | | cancel-button-text | 取消按钮文案 | _string_ | `取消` |
| cancel-button-color | 取消按钮颜色 | *string* | `black` | | cancel-button-color | 取消按钮颜色 | _string_ | `black` |
| overlay | 是否展示遮罩层 | *boolean* | `true` | | overlay | 是否展示遮罩层 | _boolean_ | `true` |
| overlay-class `v2.2.7` | 自定义遮罩层类名 | *string* | - | | overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
| overlay-style `v2.2.7` | 自定义遮罩层样式 | *object* | - | | overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | | close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | | lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | | transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Events ### Events
通过组件调用 `Dialog` 时，支持以下事件： 通过组件调用 `Dialog` 时，支持以下事件：
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
|------|------|------| | ------- | ------------------------ | -------- |
| confirm | 点击确认按钮时触发 | - | | confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - | | cancel | 点击取消按钮时触发 | - |
| open | 打开弹窗时触发 | - | | open | 打开弹窗时触发 | - |
@ -210,6 +211,6 @@ export default {
通过组件调用 `Dialog` 时，支持以下插槽： 通过组件调用 `Dialog` 时，支持以下插槽：
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ---------- |
| default | 自定义内容 | | default | 自定义内容 |
| title | 自定义标题 | | title | 自定义标题 |

14
src/divider/README.md
View File

@ -39,7 +39,9 @@ Vue.use(Divider);
### Custom Style ### Custom Style
```html ```html
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> <van-divider
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
Text Text
</van-divider> </van-divider>
``` ```
@ -49,13 +51,13 @@ Vue.use(Divider);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| dashed | Whether to use dashed border | *boolean* | `false` | | dashed | Whether to use dashed border | _boolean_ | `false` |
| hairline | Whether to use hairline | *boolean* | `true` | | hairline | Whether to use hairline | _boolean_ | `true` |
| content-position | Content position，can be set to `left` `right` | *string* | `center` | | content-position | Content position，can be set to `left` `right` | _string_ | `center` |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ----------- |
| default | content | | default | content |

14
src/divider/README.zh-CN.md
View File

@ -49,7 +49,9 @@ Vue.use(Divider);
可以直接通过`style`属性设置分割线的样式 可以直接通过`style`属性设置分割线的样式
```html ```html
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> <van-divider
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
文字 文字
</van-divider> </van-divider>
``` ```
@ -59,13 +61,13 @@ Vue.use(Divider);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ---------------- | -------------------------------- | --------- | -------- |
| dashed | 是否使用虚线 | *boolean* | `false` | | dashed | 是否使用虚线 | _boolean_ | `false` |
| hairline | 是否使用 0.5px 线 | *boolean* | `true` | | hairline | 是否使用 0.5px 线 | _boolean_ | `true` |
| content-position | 内容位置，可选值为`left` `right` | *string* | `center` | | content-position | 内容位置，可选值为`left` `right` | _string_ | `center` |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ---- |
| default | 内容 | | default | 内容 |

62
src/dropdown-menu/README.md
View File

@ -30,15 +30,15 @@ export default {
option1: [ option1: [
{ text: 'Option1', value: 0 }, { text: 'Option1', value: 0 },
{ text: 'Option2', value: 1 }, { text: 'Option2', value: 1 },
{ text: 'Option3', value: 2 } { text: 'Option3', value: 2 },
], ],
option2: [ option2: [
{ text: 'Option A', value: 'a' }, { text: 'Option A', value: 'a' },
{ text: 'Option B', value: 'b' }, { text: 'Option B', value: 'b' },
{ text: 'Option C', value: 'c' }, { text: 'Option C', value: 'c' },
] ],
} };
} },
}; };
``` ```
@ -65,15 +65,15 @@ export default {
option: [ option: [
{ text: 'Option1', value: 0 }, { text: 'Option1', value: 0 },
{ text: 'Option2', value: 1 }, { text: 'Option2', value: 1 },
{ text: 'Option3', value: 2 } { text: 'Option3', value: 2 },
] ],
} };
}, },
methods: { methods: {
onConfirm() { onConfirm() {
this.$refs.item.toggle(); this.$refs.item.toggle();
} },
} },
}; };
``` ```
@ -111,30 +111,30 @@ Use `active-color` prop to custom active color of the title and options
### DropdownMenu Props ### DropdownMenu Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| active-color | Active color of title and option | *string* | `#1989fa` | | active-color | Active color of title and option | _string_ | `#1989fa` |
| direction `v2.0.1` | Expand direction, can be set to `up` | *string* | `down` | | direction `v2.0.1` | Expand direction, can be set to `up` | _string_ | `down` |
| z-index | z-index of menu item | *number \| string* | `10` | | z-index | z-index of menu item | _number \| string_ | `10` |
| duration | Transition duration, unit second | *number \| string* | `0.2` | | duration | Transition duration, unit second | _number \| string_ | `0.2` |
| overlay | Whether to show overlay | *boolean* | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
| close-on-click-outside `v2.0.7` | Whether to close when click outside | *boolean* | `true` | | close-on-click-outside `v2.0.7` | Whether to close when click outside | _boolean_ | `true` |
### DropdownItem Props ### DropdownItem Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| value | Value of current option，can use `v-model` | *number \| string* | - | | value | Value of current option，can use `v-model` | _number \| string_ | - |
| title | Item title | *string* | Text of selected option | | title | Item title | _string_ | Text of selected option |
| options | Options | *Option[]* | `[]` | | options | Options | _Option[]_ | `[]` |
| disabled | Whether to disable dropdown item | *boolean* | `false` | | disabled | Whether to disable dropdown item | _boolean_ | `false` |
| title-class | Title class | *string* | - | | title-class | Title class | _string_ | - |
| get-container `v2.2.4` | Return the mount node for menu | *string \| () => Element* | - | | get-container `v2.2.4` | Return the mount node for menu | _string \| () => Element_ | - |
### DropdownItem Events ### DropdownItem Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | ----------------------------------------- | --------- |
| change | Triggered select option and value changed | value | | change | Triggered select option and value changed | value |
| open | Triggered when open menu | - | | open | Triggered when open menu | - |
| close | Triggered when close menu | - | | close | Triggered when close menu | - |
@ -144,7 +144,7 @@ Use `active-color` prop to custom active color of the title and options
### DropdownItem Slots ### DropdownItem Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------ |
| default | Content | | default | Content |
| title | Custom title | | title | Custom title |
@ -153,13 +153,13 @@ Use `active-color` prop to custom active color of the title and options
Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ------ | -------------- | ------------- | ------------ |
| toggle | Toggle display | show: boolean | - | | toggle | Toggle display | show: boolean | - |
### Data Structure of Option ### Data Structure of Option
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | ----- | ----------- | ------------------ |
| text | Text | *string* | | text | Text | _string_ |
| value | Value | *number \| string* | | value | Value | _number \| string_ |
| icon | Left icon | *string* | | icon | Left icon | _string_ |

62
src/dropdown-menu/README.zh-CN.md
View File

@ -30,15 +30,15 @@ export default {
option1: [ option1: [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 } { text: '活动商品', value: 2 },
], ],
option2: [ option2: [
{ text: '默认排序', value: 'a' }, { text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' }, { text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' }, { text: '销量排序', value: 'c' },
] ],
} };
} },
}; };
``` ```
@ -67,15 +67,15 @@ export default {
option: [ option: [
{ text: '全部商品', value: 0 }, { text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 }, { text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 } { text: '活动商品', value: 2 },
] ],
} };
}, },
methods: { methods: {
onConfirm() { onConfirm() {
this.$refs.item.toggle(); this.$refs.item.toggle();
} },
} },
}; };
``` ```
@ -115,30 +115,30 @@ export default {
### DropdownMenu Props ### DropdownMenu Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| active-color | 菜单标题和选项的选中态颜色 | *string* | `#1989fa` | | active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` |
| direction `v2.0.1` | 菜单展开方向，可选值为`up` | *string* | `down` | | direction `v2.0.1` | 菜单展开方向，可选值为`up` | _string_ | `down` |
| z-index | 菜单栏 z-index 层级 | *number \| string* | `10` | | z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` |
| duration | 动画时长，单位秒 | *number \| string* | `0.2` | | duration | 动画时长，单位秒 | _number \| string_ | `0.2` |
| overlay | 是否显示遮罩层 | *boolean* | `true` | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | *boolean* | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |
| close-on-click-outside `v2.0.7` | 是否在点击外部元素后关闭菜单 | *boolean* | `true` | | close-on-click-outside `v2.0.7` | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
### DropdownItem Props ### DropdownItem Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | *number \| string* | - | | value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | _number \| string_ | - |
| title | 菜单项标题 | *string* | 当前选中项文字 | | title | 菜单项标题 | _string_ | 当前选中项文字 |
| options | 选项数组 | *Option[]* | `[]` | | options | 选项数组 | _Option[]_ | `[]` |
| disabled | 是否禁用菜单 | *boolean* | `false` | | disabled | 是否禁用菜单 | _boolean_ | `false` |
| title-class | 标题额外类名 | *string* | - | | title-class | 标题额外类名 | _string_ | - |
| get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | | get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### DropdownItem Events ### DropdownItem Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ----------------------------- | -------- |
| change | 点击选项导致 value 变化时触发 | value | | change | 点击选项导致 value 变化时触发 | value |
| open | 打开菜单栏时触发 | - | | open | 打开菜单栏时触发 | - |
| close | 关闭菜单栏时触发 | - | | close | 关闭菜单栏时触发 | - |
@ -148,7 +148,7 @@ export default {
### DropdownItem Slots ### DropdownItem Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------------------- |
| default | 菜单内容 | | default | 菜单内容 |
| title | 自定义标题，不支持动态渲染 | | title | 自定义标题，不支持动态渲染 |
@ -157,13 +157,13 @@ export default {
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - | | toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
### Option 数据结构 ### Option 数据结构
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | ----- | -------------------------------------- | ------------------ |
| text | 文字 | *string* | | text | 文字 | _string_ |
| value | 标识符 | *number \| string* | | value | 标识符 | _number \| string_ |
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ |

8
src/empty/README.md
View File

@ -67,14 +67,14 @@ Use the image prop to display different placeholder images
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| image | Image type，can be set to `error` `network` `search` or image URL | *string* | `default` | | image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
| description | Desciption | *string* | - | | description | Desciption | _string_ | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ----------- | --------------------- |
| default | Custom bottom content | | default | Custom bottom content |
| image | Custom image | | image | Custom image |
| description | Custom description | | description | Custom description |

8
src/empty/README.zh-CN.md
View File

@ -76,14 +76,14 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | *string* | `default` | | image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
| description | 图片下方的描述文字 | *string* | - | | description | 图片下方的描述文字 | _string_ | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ----------- | -------------- |
| default | 自定义底部内容 | | default | 自定义底部内容 |
| image | 自定义图标 | | image | 自定义图标 |
| description | 自定义描述文字 | | description | 自定义描述文字 |

114
src/field/README.md
View File

@ -25,10 +25,10 @@ The value of field is bound with v-model.
export default { export default {
data() { data() {
return { return {
value: '' value: '',
};
},
}; };
}
}
``` ```
### Custom Type ### Custom Type
@ -51,10 +51,10 @@ export default {
text: '', text: '',
digit: '', digit: '',
number: '', number: '',
password: '' password: '',
};
},
}; };
}
}
``` ```
### Disabled ### Disabled
@ -92,9 +92,9 @@ export default {
data() { data() {
return { return {
value1: '', value1: '',
value2: '123' value2: '123',
}; };
} },
}; };
``` ```
@ -126,13 +126,7 @@ Use `error` or `error-message` to show error info
Use button slot to insert button Use button slot to insert button
```html ```html
<van-field <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
v-model="sms"
center
clearable
label="SMS"
placeholder="SMS"
>
<template #button> <template #button>
<van-button size="small" type="primary">Send SMS</van-button> <van-button size="small" type="primary">Send SMS</van-button>
</template> </template>
@ -156,15 +150,15 @@ Use `formatter` prop to format the input value
export default { export default {
data() { data() {
return { return {
value: '' value: '',
}; };
}, },
methods: { methods: {
formatter(value) { formatter(value) {
return value.replace(/\d/g, ''); return value.replace(/\d/g, '');
} },
} },
} };
``` ```
### Auto Resize ### Auto Resize
@ -215,65 +209,65 @@ Use `input-align` prop to align the input value
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | Field value | *number \| string* | - | | v-model (value) | Field value | _number \| string_ | - |
| label | Field label | *string* | - | | label | Field label | _string_ | - |
| name `v2.5.0` | Name | *string* | - | | name `v2.5.0` | Name | _string_ | - |
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` | | type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
| size | Size，can be set to `large` | *string* | - | | size | Size，can be set to `large` | _string_ | - |
| maxlength | Max length of value | *number \| string* | - | | maxlength | Max length of value | _number \| string_ | - |
| placeholder | Placeholder | *string* | - | | placeholder | Placeholder | _string_ | - |
| border | Whether to show inner border | *boolean* | `true` | | border | Whether to show inner border | _boolean_ | `true` |
| disabled | Whether to disable field | *boolean* | `false` | | disabled | Whether to disable field | _boolean_ | `false` |
| readonly | Whether to be readonly | *boolean* | `false` | | readonly | Whether to be readonly | _boolean_ | `false` |
| required | Whether to show required mark | *boolean* | `false` | | required | Whether to show required mark | _boolean_ | `false` |
| clearable | Whether to be clearable | *boolean* | `false` | | clearable | Whether to be clearable | _boolean_ | `false` |
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
| is-link | Whether to show link icon | *boolean* | `false` | | is-link | Whether to show link icon | _boolean_ | `false` |
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | | show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
| error | Whether to show error info | *boolean* | `false` | | error | Whether to show error info | _boolean_ | `false` |
| error-message | Error message | *string* | - | | error-message | Error message | _string_ | - |
| formatter `v2.4.2` | Input value formatter | *Function* | - | | formatter `v2.4.2` | Input value formatter | _Function_ | - |
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` | | arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
| label-class | Label className | *any* | - | | label-class | Label className | _any_ | - |
| label-width | Label width | *number \| string* | `90px` | | label-width | Label width | _number \| string_ | `90px` |
| label-align | Label align, can be set to `center` `right` | *string* | `left` | | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
| input-align | Input align, can be set to `center` `right` | *string* | `left` | | input-align | Input align, can be set to `center` `right` | _string_ | `left` |
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` | | autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
| left-icon | Left side icon name | *string* | - | | left-icon | Left side icon name | _string_ | - |
| right-icon | Right side icon name | *string* | - | | right-icon | Right side icon name | _string_ | - |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
| rules `v2.5.0` | Form validation rules | *Rule[]* | - | | rules `v2.5.0` | Form validation rules | _Rule[]_ | - |
### Events ### Events
Field support all native events of input tag Field support all native events of input tag
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | --- | --- | --- |
| input | Triggered when input value changed | *value: string* | | input | Triggered when input value changed | _value: string_ |
| focus | Triggered when input gets focus | *event: Event* | | focus | Triggered when input gets focus | _event: Event_ |
| blur | Triggered when input loses focus | *event: Event* | | blur | Triggered when input loses focus | _event: Event_ |
| clear | Triggered when click clear icon | *event: Event* | | clear | Triggered when click clear icon | _event: Event_ |
| click | Triggered when click Field | *event: Event* | | click | Triggered when click Field | _event: Event_ |
| click-left-icon | Triggered when click the left icon of Field | *event: Event* | | click-left-icon | Triggered when click the left icon of Field | _event: Event_ |
| click-right-icon | Triggered when click the right icon of Field | *event: Event* | | click-right-icon | Triggered when click the right icon of Field | _event: Event_ |
### Methods ### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ----- | ------------------- | --------- | ------------ |
| focus | Trigger input focus | - | - | | focus | Trigger input focus | - | - |
| blur | Trigger input blur | - | - | | blur | Trigger input blur | - | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ----------------- |
| label | Custom label | | label | Custom label |
| input | Custom input | | input | Custom input |
| left-icon | Custom left icon | | left-icon | Custom left icon |

106
src/field/README.zh-CN.md
View File

@ -30,10 +30,10 @@ Vue.use(Field);
export default { export default {
data() { data() {
return { return {
value: '' value: '',
};
},
}; };
}
}
``` ```
### 自定义类型 ### 自定义类型
@ -61,10 +61,10 @@ export default {
text: '', text: '',
digit: '', digit: '',
number: '', number: '',
password: '' password: '',
};
},
}; };
}
}
``` ```
> Tips: digit 类型从 2.4.2 版本开始支持 > Tips: digit 类型从 2.4.2 版本开始支持
@ -108,9 +108,9 @@ export default {
data() { data() {
return { return {
value1: '', value1: '',
value2: '123' value2: '123',
}; };
} },
}; };
``` ```
@ -172,16 +172,16 @@ export default {
export default { export default {
data() { data() {
return { return {
value: '' value: '',
}; };
}, },
methods: { methods: {
formatter(value) { formatter(value) {
// 过滤输入的数字 // 过滤输入的数字
return value.replace(/\d/g, ''); return value.replace(/\d/g, '');
} },
} },
} };
``` ```
### 高度自适应 ### 高度自适应
@ -234,65 +234,65 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 当前输入的值 | *number \| string* | - | | v-model (value) | 当前输入的值 | _number \| string_ | - |
| label | 输入框左侧文本 | *string* | - | | label | 输入框左侧文本 | _string_ | - |
| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - | | name `v2.5.0` | 名称，提交表单的标识符 | _string_ | - |
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` | | type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
| size | 大小，可选值为 `large` | *string* | - | | size | 大小，可选值为 `large` | _string_ | - |
| maxlength | 输入的最大字符数 | *number \| string* | - | | maxlength | 输入的最大字符数 | _number \| string_ | - |
| placeholder | 占位提示文字 | *string* | - | | placeholder | 占位提示文字 | _string_ | - |
| border | 是否显示内边框 | *boolean* | `true` | | border | 是否显示内边框 | _boolean_ | `true` |
| disabled | 是否禁用输入框 | *boolean* | `false` | | disabled | 是否禁用输入框 | _boolean_ | `false` |
| readonly | 是否只读 | *boolean* | `false` | | readonly | 是否只读 | _boolean_ | `false` |
| required | 是否显示表单必填星号 | *boolean* | `false` | | required | 是否显示表单必填星号 | _boolean_ | `false` |
| clearable | 是否启用清除控件 | *boolean* | `false` | | clearable | 是否启用清除控件 | _boolean_ | `false` |
| clickable | 是否开启点击反馈 | *boolean* | `false` | | clickable | 是否开启点击反馈 | _boolean_ | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | | show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
| error | 是否将输入内容标红 | *boolean* | `false` | | error | 是否将输入内容标红 | _boolean_ | `false` |
| error-message | 底部错误提示文案，为空时不展示 | *string* | - | | error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - | | formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - |
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | | arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
| label-class | 左侧文本额外类名 | *any* | - | | label-class | 左侧文本额外类名 | _any_ | - |
| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` | | label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` |
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | | label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | *boolean \| object* | `false` | | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - | | rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - |
### Events ### Events
除下列事件外，Field 默认支持 Input 标签所有的原生事件 除下列事件外，Field 默认支持 Input 标签所有的原生事件
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
|------|------|------| | ---------------- | -------------------- | ------------------------------ |
| input | 输入框内容变化时触发 | *value: string (当前输入的值)* | | input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus | 输入框获得焦点时触发 | *event: Event* | | focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | *event: Event* | | blur | 输入框失去焦点时触发 | _event: Event_ |
| clear | 点击清除按钮时触发 | *event: Event* | | clear | 点击清除按钮时触发 | _event: Event_ |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |
| click-left-icon | 点击左侧图标时触发 | *event: Event* | | click-left-icon | 点击左侧图标时触发 | _event: Event_ |
| click-right-icon | 点击右侧图标时触发 | *event: Event* | | click-right-icon | 点击右侧图标时触发 | _event: Event_ |
### 方法 ### 方法
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | ------ | -------------- | ---- | ------ |
| focus | 获取输入框焦点 | - | - | | focus | 获取输入框焦点 | - | - |
| blur | 取消输入框焦点 | - | - | | blur | 取消输入框焦点 | - | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | ---------------------------------------------------------- |
| label | 自定义输入框标签 | | label | 自定义输入框标签 |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | | input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
| left-icon | 自定义输入框头部图标 | | left-icon | 自定义输入框头部图标 |

56
src/form/README.md
View File

@ -101,7 +101,7 @@ export default {
return /1\d{10}/.test(val); return /1\d{10}/.test(val);
}, },
asyncValidator(val) { asyncValidator(val) {
return new Promise(resolve => { return new Promise((resolve) => {
Toast.loading('Validating...'); Toast.loading('Validating...');
setTimeout(() => { setTimeout(() => {
@ -379,7 +379,7 @@ export default {
}, },
methods: { methods: {
onConfirm(values) { onConfirm(values) {
this.value = values.map(item => item.name).join('/'); this.value = values.map((item) => item.name).join('/');
this.showArea = false; this.showArea = false;
}, },
}, },
@ -423,49 +423,49 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| label-width | Field label width | *number \| string* | `90px` | | label-width | Field label width | _number \| string_ | `90px` |
| label-align | Field label align, can be set to `center` `right` | *string* | `left` | | label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
| input-align | Field input align, can be set to `center` `right` | *string* | `left` | | input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` | | validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` |
| colon | Whether to display `:` after label | *boolean* | `false` | | colon | Whether to display `:` after label | _boolean_ | `false` |
| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` | | validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | *boolean* | `false` | | scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
| show-error `v2.6.0` | Whether to highlight input when validation failed | *boolean* | `true` | | show-error `v2.6.0` | Whether to highlight input when validation failed | _boolean_ | `true` |
| show-error-message `v2.5.8` | Whether to show error message when validation failed | *boolean* | `true` | | show-error-message `v2.5.8` | Whether to show error message when validation failed | _boolean_ | `true` |
### Data Structure of Rule ### Data Structure of Rule
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | --- | --- | --- |
| required | Whether to be a required field | *boolean* | | required | Whether to be a required field | _boolean_ |
| message `v2.5.3` | Error message | *string \| (value, rule) => string* | | message `v2.5.3` | Error message | _string \| (value, rule) => string_ |
| validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* | | validator `v2.5.3` | Custom validator | _(value, rule) => boolean \| Promise_ |
| pattern `v2.5.3` | Regex pattern | *RegExp* | | pattern `v2.5.3` | Regex pattern | _RegExp_ |
| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* | | trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | _string_ |
| formatter `v2.5.3` | Format value before validate | *(value, rule) => any* | | formatter `v2.5.3` | Format value before validate | _(value, rule) => any_ |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| submit | Triggered after submitting the form and validation passed | *values: object* | | submit | Triggered after submitting the form and validation passed | _values: object_ |
| failed | Triggered after submitting the form and validation failed | *errorInfo: { values: object, errors: object[] }* | | failed | Triggered after submitting the form and validation failed | _errorInfo: { values: object, errors: object[] }_ |
### Methods ### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ---------------------- | ---------------- | --------------- | ------------ |
| submit | Submit form | - | - | | submit | Submit form | - | - |
| validate | Validate form | *name?: string* | *Promise* | | validate | Validate form | _name?: string_ | _Promise_ |
| resetValidation | Reset validation | *name?: string* | - | | resetValidation | Reset validation | _name?: string_ | - |
| scrollToField `v2.5.2` | Scroll to field | *name: string* | - | | scrollToField `v2.5.2` | Scroll to field | _name: string_ | - |
### Slots ### Slots
| Name | Description | | Name | Description |
| ---- | ----------- | | ------- | ------------ |
| default | Form content | | default | Form content |

56
src/form/README.zh-CN.md
View File

@ -114,7 +114,7 @@ export default {
}, },
// 异步校验函数返回 Promise // 异步校验函数返回 Promise
asyncValidator(val) { asyncValidator(val) {
return new Promise(resolve => { return new Promise((resolve) => {
Toast.loading('验证中...'); Toast.loading('验证中...');
setTimeout(() => { setTimeout(() => {
@ -412,7 +412,7 @@ export default {
}, },
methods: { methods: {
onConfirm(values) { onConfirm(values) {
this.value = values.map(item => item.name).join('/'); this.value = values.map((item) => item.name).join('/');
this.showArea = false; this.showArea = false;
}, },
}, },
@ -458,17 +458,17 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| label-width | 表单项 label 宽度，默认单位为`px` | *number \| string* | `90px` | | label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` |
| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` | | label-align |  表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` | | validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | _string_ | `onBlur` |
| colon | 是否在 label 后面添加冒号 | *boolean* | `false` | | colon | 是否在 label 后面添加冒号 | _boolean_ | `false` |
| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` | | validate-first | 是否在某一项校验不通过时停止校验 | _boolean_ | `false` |
| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` | | scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` |
| show-error `v2.6.0` | 是否在校验不通过时标红输入框 | *boolean* | `true` | | show-error `v2.6.0` | 是否在校验不通过时标红输入框 | _boolean_ | `true` |
| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | *boolean* | `true` | | show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` |
> 表单项的 API 参见：[Field 组件](#/zh-CN/field#api) > 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
@ -477,36 +477,36 @@ export default {
使用 Field 的`rules`属性可以定义校验规则，可选属性如下: 使用 Field 的`rules`属性可以定义校验规则，可选属性如下:
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | --- | --- | --- |
| required | 是否为必选字段 | *boolean* | | required | 是否为必选字段 | _boolean_ |
| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* | | message `v2.5.3` | 错误提示文案 | _string \| (value, rule) => string_ |
| validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* | | validator `v2.5.3` | 通过函数进行校验 | _(value, rule) => boolean \| Promise_ |
| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* | | pattern `v2.5.3` | 通过正则表达式进行校验 | _RegExp_ |
| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* | | trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | _string_ |
| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value, rule) => any* | | formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| submit | 提交表单且验证通过后触发 | *values: object* | | submit | 提交表单且验证通过后触发 | _values: object_ |
| failed | 提交表单且验证不通过后触发 | *errorInfo: { values: object, errors: object[] }* | | failed | 提交表单且验证不通过后触发 | _errorInfo: { values: object, errors: object[] }_ |
### 方法 ### 方法
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| submit | 提交表单，与点击提交按钮的效果等价 | - | - | | submit | 提交表单，与点击提交按钮的效果等价 | - | - |
| validate | 验证表单，支持传入`name`来验证单个表单项 | *name?: string* | *Promise* | | validate | 验证表单，支持传入`name`来验证单个表单项 | _name?: string_ | _Promise_ |
| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | *name?: string* | - | | resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - |
| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | *name: string* | - | | scrollToField `v2.5.2` | 滚动到对应表单项的位置 | _name: string_ | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------- |
| default | 表单内容 | | default | 表单内容 |
## 常见问题 ## 常见问题

68
src/goods-action/README.md
View File

@ -19,8 +19,16 @@ Vue.use(GoodsActionIcon);
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" /> <van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" /> <van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
<van-goods-action-button type="warning" text="Button1" @click="onClickButton" /> <van-goods-action-button
<van-goods-action-button type="danger" text="Button2" @click="onClickButton" /> type="warning"
text="Button1"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="Button2"
@click="onClickButton"
/>
</van-goods-action> </van-goods-action>
``` ```
@ -34,9 +42,9 @@ export default {
}, },
onClickButton() { onClickButton() {
Toast('Click Button'); Toast('Click Button');
} },
} },
} };
``` ```
### Icon Badge ### Icon Badge
@ -81,47 +89,47 @@ Use `badge` prop to show badge in icon
### GoodsAction Props ### GoodsAction Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### GoodsActionIcon Props ### GoodsActionIcon Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| text | Button text | *string* | - | | text | Button text | _string_ | - |
| icon | Icon | *string* | - | | icon | Icon | _string_ | - |
| color `v2.4.2` | Icon color | *string* | `#323233` | | color `v2.4.2` | Icon color | _string_ | `#323233` |
| icon-class | Icon class name | *any* | `''` | | icon-class | Icon class name | _any_ | `''` |
| dot `2.5.5` | Whether to show red dot | *boolean* | - | | dot `2.5.5` | Whether to show red dot | _boolean_ | - |
| badge `2.5.6` | Content of the badge | *number \| string* | - | | badge `2.5.6` | Content of the badge | _number \| string_ | - |
| url | Link | *string* | - | | url | Link | _string_ | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GoodsActionButton Props ### GoodsActionButton Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| text | Button text | *string* | - | | text | Button text | _string_ | - |
| type | Button type, Can be set to `primary` `info` `warning` `danger` | *string* | `default` | | type | Button type, Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
| color `v2.1.8` | Button color, support linear-gradient | *string* | - | | color `v2.1.8` | Button color, support linear-gradient | _string_ | - |
| icon `v2.4.4` | Left Icon | *string* | - | | icon `v2.4.4` | Left Icon | _string_ | - |
| primary | Is primary button (red color) | *boolean* | `false` | | primary | Is primary button (red color) | _boolean_ | `false` |
| disabled | Whether to disable button | *boolean* | `false` | | disabled | Whether to disable button | _boolean_ | `false` |
| loading | Whether show loading status | *boolean* | `false` | | loading | Whether show loading status | _boolean_ | `false` |
| url | Link | *string* | - | | url | Link | _string_ | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GoodsActionIcon Slots ### GoodsActionIcon Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ----------- |
| default | Text | | default | Text |
| icon | Custom icon | | icon | Custom icon |
### GoodsActionButton Slots ### GoodsActionButton Slots
| Name | Description | | Name | Description |
|------|------| | ------- | -------------- |
| default | Button content | | default | Button content |

68
src/goods-action/README.zh-CN.md
View File

@ -19,8 +19,16 @@ Vue.use(GoodsActionIcon);
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" /> <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" /> <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" /> <van-goods-action-button
<van-goods-action-button type="danger" text="立即购买" @click="onClickButton" /> type="warning"
text="加入购物车"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="立即购买"
@click="onClickButton"
/>
</van-goods-action> </van-goods-action>
``` ```
@ -34,9 +42,9 @@ export default {
}, },
onClickButton() { onClickButton() {
Toast('点击按钮'); Toast('点击按钮');
} },
} },
} };
``` ```
### 徽标提示 ### 徽标提示
@ -85,47 +93,47 @@ export default {
### GoodsAction Props ### GoodsAction Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
### GoodsActionIcon Props ### GoodsActionIcon Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| text | 按钮文字 | *string* | - | | text | 按钮文字 | _string_ | - |
| icon | 图标 | *string* | - | | icon | 图标 | _string_ | - |
| color `v2.4.2` | 图标颜色 | *string* | `#323233` | | color `v2.4.2` | 图标颜色 | _string_ | `#323233` |
| icon-class | 图标额外类名 | *any* | - | | icon-class | 图标额外类名 | _any_ | - |
| dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` | | dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | | info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionButton Props ### GoodsActionButton Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| text | 按钮文字 | *string* | - | | text | 按钮文字 | _string_ | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | | color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| disabled | 是否禁用按钮 | *boolean* | `false` | - | | disabled | 是否禁用按钮 | _boolean_ | `false` | - |
| loading | 是否显示为加载状态 | *boolean* | `false` | - | | loading | 是否显示为加载状态 | _boolean_ | `false` | - |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GoodsActionIcon Slots ### GoodsActionIcon Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ---------- |
| default | 文本内容 | | default | 文本内容 |
| icon | 自定义图标 | | icon | 自定义图标 |
### GoodsActionButton Slots ### GoodsActionButton Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ------------ |
| default | 按钮显示内容 | | default | 按钮显示内容 |

61
src/grid/README.md
View File

@ -27,12 +27,7 @@ Vue.use(GridItem);
```html ```html
<van-grid :column-num="3"> <van-grid :column-num="3">
<van-grid-item <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />
v-for="value in 6"
:key="value"
icon="photo-o"
text="Text"
/>
</van-grid> </van-grid>
``` ```
@ -56,12 +51,7 @@ Vue.use(GridItem);
```html ```html
<van-grid square> <van-grid square>
<van-grid-item <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
v-for="value in 8"
:key="value"
icon="photo-o"
text="Text"
/>
</van-grid> </van-grid>
``` ```
@ -69,12 +59,7 @@ Vue.use(GridItem);
```html ```html
<van-grid :gutter="10"> <van-grid :gutter="10">
<van-grid-item <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
v-for="value in 8"
:key="value"
icon="photo-o"
text="Text"
/>
</van-grid> </van-grid>
``` ```
@ -101,38 +86,38 @@ Vue.use(GridItem);
### Grid Props ### Grid Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| column-num `v2.0.4` | Column Num | *number \| string* | `4` | | column-num `v2.0.4` | Column Num | _number \| string_ | `4` |
| icon-size `v2.2.6` | Icon size | *number \| string* | `28px` | | icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` |
| gutter | Gutter | *number \| string* | `0` | | gutter | Gutter | _number \| string_ | `0` |
| border | Whether to show border | *boolean* | `true` | | border | Whether to show border | _boolean_ | `true` |
| center | Whether to center content | *boolean* | `true` | | center | Whether to center content | _boolean_ | `true` |
| square | Whether to be square shape | *boolean* | `false` | | square | Whether to be square shape | _boolean_ | `false` |
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
### GridItem Props ### GridItem Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| text | Text | *string* | - | | text | Text | _string_ | - |
| icon | Icon name or URL | *string* | - | | icon | Icon name or URL | _string_ | - |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` | | dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
| badge `v2.5.6` | Content of the badge | *number \| string* | - | | badge `v2.5.6` | Content of the badge | _number \| string_ | - |
| url | Link URL | *string* | - | | url | Link URL | _string_ | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
### GridItem Events ### GridItem Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ---------------------- | -------------- |
| click | Triggered when clicked | *event: Event* | | click | Triggered when clicked | _event: Event_ |
### GridItem Slots ### GridItem Slots
| Name | Description | | Name | Description |
|------|------| | ------- | -------------- |
| default | Custom content | | default | Custom content |
| icon | Custom icon | | icon | Custom icon |
| text | Custom text | | text | Custom text |

63
src/grid/README.zh-CN.md
View File

@ -35,12 +35,7 @@ Vue.use(GridItem);
```html ```html
<van-grid :column-num="3"> <van-grid :column-num="3">
<van-grid-item <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
v-for="value in 6"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid> </van-grid>
``` ```
@ -68,12 +63,7 @@ Vue.use(GridItem);
```html ```html
<van-grid square> <van-grid square>
<van-grid-item <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid> </van-grid>
``` ```
@ -83,12 +73,7 @@ Vue.use(GridItem);
```html ```html
<van-grid :gutter="10"> <van-grid :gutter="10">
<van-grid-item <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid> </van-grid>
``` ```
@ -119,39 +104,39 @@ Vue.use(GridItem);
### Grid Props ### Grid Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| column-num `v2.0.4` | 列数 | *number \| string* | `4` | | column-num `v2.0.4` | 列数 | _number \| string_ | `4` |
| icon-size `v2.2.6` | 图标大小，默认单位为`px` | *number \| string* | `28px` | | icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
| gutter | 格子之间的间距，默认单位为`px` | *number \| string* | `0` | | gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
| border | 是否显示边框 | *boolean* | `true` | | border | 是否显示边框 | _boolean_ | `true` |
| center | 是否将格子内容居中显示 | *boolean* | `true` | | center | 是否将格子内容居中显示 | _boolean_ | `true` |
| square | 是否将格子固定为正方形 | *boolean* | `false` | | square | 是否将格子固定为正方形 | _boolean_ | `false` |
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | | clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
### GridItem Props ### GridItem Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| text | 文字 | *string* | - | | text | 文字 | _string_ | - |
| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` | | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | | info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | _string_ | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
### GridItem Events ### GridItem Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | -------------- |
| click | 点击格子时触发 | *event: Event* | | click | 点击格子时触发 | _event: Event_ |
### GridItem Slots ### GridItem Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------------- |
| default | 自定义宫格的所有内容 | | default | 自定义宫格的所有内容 |
| icon | 自定义图标 | | icon | 自定义图标 |
| text | 自定义文字 | | text | 自定义文字 |

23
src/icon/README.md
View File

@ -46,8 +46,7 @@ Use `color` prop to set icon color
Use `size` prop to set icon size Use `size` prop to set icon size
```html ```html
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
<van-icon name="chat-o" size="3rem" />
``` ```
### Use local font file ### Use local font file
@ -84,17 +83,17 @@ import 'vant/lib/icon/local.css';
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | -------------- | ----------------------- | ------------------ | ---------- |
| name | Icon name or URL | *string* | `''` | | name | Icon name or URL | _string_ | `''` |
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` | | dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
| badge `v2.5.6` | Content of the badge | *number \| string* | `''` | | badge `v2.5.6` | Content of the badge | _number \| string_ | `''` |
| color | Icon color | *string* | `inherit` | | color | Icon color | _string_ | `inherit` |
| size | Icon size | *number \| string* | `inherit` | | size | Icon size | _number \| string_ | `inherit` |
| class-prefix | ClassName prefix | *string* | `van-icon` | | class-prefix | ClassName prefix | _string_ | `van-icon` |
| tag | HTML Tag | *string* | `i` | | tag | HTML Tag | _string_ | `i` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ------------------------- | -------------- |
| click | Triggered when click icon | *event: Event* | | click | Triggered when click icon | _event: Event_ |

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

@ -48,8 +48,7 @@ Vue.use(Icon);
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px` `Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
```html ```html
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
<van-icon name="chat-o" size="3rem" />
``` ```
### 使用本地字体文件 ### 使用本地字体文件
@ -90,18 +89,18 @@ import 'vant/lib/icon/local.css';
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| name | 图标名称或图片链接 | *string* | - | | name | 图标名称或图片链接 | _string_ | - |
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` | | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | | info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
| color | 图标颜色 | *string* | `inherit` | | color | 图标颜色 | _string_ | `inherit` |
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | *number \| string* | `inherit` | | size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
| class-prefix | 类名前缀，用于使用自定义图标 | *string* | `van-icon` | | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
| tag | HTML 标签 | *string* | `i` | | tag | HTML 标签 | _string_ | `i` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | -------------- |
| click | 点击图标时触发 | *event: Event* | | click | 点击图标时触发 | _event: Event_ |

110
src/image-preview/README.md
View File

@ -16,7 +16,7 @@ Vue.use(ImagePreview);
```js ```js
ImagePreview([ ImagePreview([
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg' 'https://img.yzcdn.cn/vant/apple-2.jpg',
]); ]);
``` ```
@ -26,12 +26,12 @@ ImagePreview([
ImagePreview({ ImagePreview({
images: [ images: [
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg' 'https://img.yzcdn.cn/vant/apple-2.jpg',
], ],
startPosition: 1, startPosition: 1,
onClose() { onClose() {
// do something // do something
} },
}); });
``` ```
@ -41,11 +41,8 @@ After setting the `closeable` attribute, the close icon will be displayed in the
```js ```js
ImagePreview({ ImagePreview({
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg', closeable: true,
'https://img.yzcdn.cn/2.jpg'
],
closeable: true
}); });
``` ```
@ -55,9 +52,9 @@ ImagePreview({
const instance = ImagePreview({ const instance = ImagePreview({
images: [ images: [
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg' 'https://img.yzcdn.cn/vant/apple-2.jpg',
], ],
asyncClose: true asyncClose: true,
}); });
setTimeout(() => { setTimeout(() => {
@ -79,19 +76,16 @@ export default {
return { return {
show: false, show: false,
index: 0, index: 0,
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
}; };
}, },
methods: { methods: {
onChange(index) { onChange(index) {
this.index = index; this.index = index;
} },
} },
} };
``` ```
## API ## API
@ -99,48 +93,48 @@ export default {
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| images | Images URL list | *string[]* | `[]` | | images | Images URL list | _string[]_ | `[]` |
| startPosition | Start position | *number \| string* | `0` | | startPosition | Start position | _number \| string_ | `0` |
| showIndex | Whether to show index | *boolean* | `true` | | showIndex | Whether to show index | _boolean_ | `true` |
| showIndicators | Whether to show indicators | *boolean* | `false` | | showIndicators | Whether to show indicators | _boolean_ | `false` |
| loop | Whether to enable loop | *boolean* | `true` | | loop | Whether to enable loop | _boolean_ | `true` |
| swipeDuration | Animation duration (ms) | *number \| string* | `500` | | swipeDuration | Animation duration (ms) | _number \| string_ | `500` |
| onClose | Triggered when close | *Function* | - | | onClose | Triggered when close | _Function_ | - |
| onChange `v2.0.3` | Triggered when current image change | *Function* | - | | onChange `v2.0.3` | Triggered when current image change | _Function_ | - |
| onScale | Triggered when current image scale | *Function* | - | | onScale | Triggered when current image scale | _Function_ | - |
| closeOnPopstate | Whether to close when popstate | *boolean* | `false` | | closeOnPopstate | Whether to close when popstate | _boolean_ | `false` |
| asyncClose | Whether to enable async close | *boolean* | `false` | | asyncClose | Whether to enable async close | _boolean_ | `false` |
| className | Custom className | *any* | - | | className | Custom className | _any_ | - |
| maxZoom | Max zoom | *number \| string* | `3` | | maxZoom | Max zoom | _number \| string_ | `3` |
| minZoom | Min zoom | *number \| string* | `1/3` | | minZoom | Min zoom | _number \| string_ | `1/3` |
| closeable | Whether to show close icon | *boolean* | `false` | | closeable | Whether to show close icon | _boolean_ | `false` |
| closeIcon | Close icon name | *string* | `clear` | | closeIcon | Close icon name | _string_ | `clear` |
| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | | closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| images | Images URL list | *string[]* | `[]` | | images | Images URL list | _string[]_ | `[]` |
| start-position | Start position | *number \| string* | `0` | | start-position | Start position | _number \| string_ | `0` |
| swipe-duration | Animation duration (ms) | *number \| string* | `500` | | swipe-duration | Animation duration (ms) | _number \| string_ | `500` |
| show-index | Whether to show index | *boolean* | `true` | | show-index | Whether to show index | _boolean_ | `true` |
| show-indicators | Whether to show indicators | *boolean* | `false` | | show-indicators | Whether to show indicators | _boolean_ | `false` |
| loop | Whether to enable loop | *boolean* | `true` | | loop | Whether to enable loop | _boolean_ | `true` |
| async-close | Whether to enable async close | *boolean* | `false` | | async-close | Whether to enable async close | _boolean_ | `false` |
| close-on-popstate | Whether to close when popstate | *boolean* | `false` | | close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
| class-name | Custom className | *any* | - | | class-name | Custom className | _any_ | - |
| max-zoom | Max zoom | *number \| string* | `3` | | max-zoom | Max zoom | _number \| string_ | `3` |
| min-zoom | Min zoom | *number \| string* | `1/3` | | min-zoom | Min zoom | _number \| string_ | `1/3` |
| closeable `v2.5.0` | Whether to show close icon | *boolean* | `false` | | closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
| close-icon `v2.5.0` | Close icon name | *string* | `clear` | | close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | | close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
### Events ### Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | --- | --- | --- |
| close | Triggered when close | { index, url } | | close | Triggered when close | { index, url } |
| closed `v2.5.6` | Triggered after closed | - | | closed `v2.5.6` | Triggered after closed | - |
| change | Triggered when current image change | index: index of current image | | change | Triggered when current image change | index: index of current image |
@ -149,20 +143,20 @@ export default {
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ----- | -------------------------------------------- |
| index | Custom index | | index | Custom index |
| cover | Custom content that covers the image preview | | cover | Custom content that covers the image preview |
### onClose Parematers ### onClose Parematers
| Attribute | Description | Type | | Attribute | Description | Type |
|------|------|------| | --------- | ---------------------- | -------- |
| url | Url of current image | *number* | | url | Url of current image | _number_ |
| index | Index of current image | *number* | | index | Index of current image | _number_ |
### onScale Parematers ### onScale Parematers
| Attribute | Description | Type | | Attribute | Description | Type |
|------|------|------| | --------- | ---------------------- | -------- |
| index | Index of current image | *number* | | index | Index of current image | _number_ |
| scale | scale of current image | *number* | | scale | scale of current image | _number_ |

119
src/image-preview/README.zh-CN.md
View File

@ -18,10 +18,7 @@ Vue.use(ImagePreview);
直接传入图片数组，即可展示图片预览 直接传入图片数组，即可展示图片预览
```js ```js
ImagePreview([ ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']);
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
``` ```
### 传入配置项 ### 传入配置项
@ -30,14 +27,11 @@ ImagePreview([
```js ```js
ImagePreview({ ImagePreview({
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
startPosition: 1, startPosition: 1,
onClose() { onClose() {
// do something // do something
} },
}); });
``` ```
@ -47,11 +41,8 @@ ImagePreview({
```js ```js
ImagePreview({ ImagePreview({
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg', closeable: true,
'https://img.yzcdn.cn/2.jpg'
],
closeable: true
}); });
``` ```
@ -61,11 +52,8 @@ ImagePreview({
```js ```js
const instance = ImagePreview({ const instance = ImagePreview({
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg', asyncClose: true,
'https://img.yzcdn.cn/2.jpg'
],
asyncClose: true
}); });
setTimeout(() => { setTimeout(() => {
@ -89,19 +77,16 @@ export default {
return { return {
show: false, show: false,
index: 0, index: 0,
images: [ images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'],
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
}; };
}, },
methods: { methods: {
onChange(index) { onChange(index) {
this.index = index; this.index = index;
} },
} },
} };
``` ```
## API ## API
@ -111,52 +96,52 @@ export default {
通过函数调用 `ImagePreview` 时，支持传入以下选项： 通过函数调用 `ImagePreview` 时，支持传入以下选项：
| 参数名 | 说明 | 类型 | 默认值 | | 参数名 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | | images | 需要预览的图片 URL 数组 | _string[]_ | `[]` |
| startPosition | 图片预览起始位置索引 | *number \| string* | `0` | | startPosition | 图片预览起始位置索引 | _number \| string_ | `0` |
| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` | | swipeDuration | 动画时长，单位为`ms` | _number \| string_ | `500` |
| showIndex | 是否显示页码 | *boolean* | `true` | | showIndex | 是否显示页码 | _boolean_ | `true` |
| showIndicators | 是否显示轮播指示器 | *boolean* | `false` | | showIndicators | 是否显示轮播指示器 | _boolean_ | `false` |
| loop | 是否开启循环播放 | *boolean* | `true` | | loop | 是否开启循环播放 | _boolean_ | `true` |
| onClose | 关闭时的回调函数 | *Function* | - | | onClose | 关闭时的回调函数 | _Function_ | - |
| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - | | onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - |
| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | *Function* | - | | onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - |
| asyncClose | 是否开启异步关闭 | *boolean* | `false` | | asyncClose | 是否开启异步关闭 | _boolean_ | `false` |
| closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| className | 自定义类名 | *any* | - | | className | 自定义类名 | _any_ | - |
| maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | | maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
| minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | | minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
| closeable | 是否显示关闭图标 | *boolean* | `false` | | closeable | 是否显示关闭图标 | _boolean_ | `false` |
| closeIcon | 关闭图标名称或图片链接 | *string* | `clear` | | closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
| closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | *string* | `top-right` | | closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
### Props ### Props
通过组件调用 `ImagePreview` 时，支持以下 Props： 通过组件调用 `ImagePreview` 时，支持以下 Props：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | | images | 需要预览的图片 URL 数组 | _string[]_ | `[]` |
| start-position | 图片预览起始位置索引 | *number \| string* | `0` | | start-position | 图片预览起始位置索引 | _number \| string_ | `0` |
| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` | | swipe-duration | 动画时长，单位为 ms | _number \| string_ | `500` |
| show-index | 是否显示页码 | *boolean* | `true` | | show-index | 是否显示页码 | _boolean_ | `true` |
| show-indicators | 是否显示轮播指示器 | *boolean* | `false` | | show-indicators | 是否显示轮播指示器 | _boolean_ | `false` |
| loop | 是否开启循环播放 | *boolean* | `true` | | loop | 是否开启循环播放 | _boolean_ | `true` |
| async-close | 是否开启异步关闭 | *boolean* | `false` | | async-close | 是否开启异步关闭 | _boolean_ | `false` |
| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| class-name | 自定义类名 | *any* | - | | class-name | 自定义类名 | _any_ | - |
| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | | max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | | min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
| closeable `v2.5.0` | 是否显示关闭图标 | *boolean* | `false` | | closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | *string* | `clear` | | close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | *string* | `top-right` | | close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
### Events ### Events
通过组件调用 `ImagePreview` 时，支持以下事件： 通过组件调用 `ImagePreview` 时，支持以下事件：
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| close | 关闭时触发 | { index: 索引, url: 图片链接 } | | close | 关闭时触发 | { index: 索引, url: 图片链接 } |
| closed `v2.5.6` | 关闭且且动画结束后触发 | - | | closed `v2.5.6` | 关闭且且动画结束后触发 | - |
| change | 切换当前图片时触发 | index: 当前图片的索引 | | change | 切换当前图片时触发 | index: 当前图片的索引 |
@ -167,23 +152,23 @@ export default {
通过组件调用 `ImagePreview` 时，支持以下插槽： 通过组件调用 `ImagePreview` 时，支持以下插槽：
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ----- | ------------------------------ |
| index | 自定义页码内容 | | index | 自定义页码内容 |
| cover | 自定义覆盖在图片预览上方的内容 | | cover | 自定义覆盖在图片预览上方的内容 |
### onClose 回调参数 ### onClose 回调参数
| 参数名 | 说明 | 类型 | | 参数名 | 说明 | 类型 |
|------|------|------| | ------ | ---------------- | -------- |
| url | 当前图片 URL | *string* | | url | 当前图片 URL | _string_ |
| index | 当前图片的索引值 | *number* | | index | 当前图片的索引值 | _number_ |
### onScale 回调参数 ### onScale 回调参数
| 参数名 | 说明 | 类型 | | 参数名 | 说明 | 类型 |
|------|------|------| | ------ | ---------------- | -------- |
| index | 当前图片的索引值 | *number* | | index | 当前图片的索引值 | _number_ |
| scale | 当前图片的缩放值 | *number* | | scale | 当前图片的缩放值 | _number_ |
## 常见问题 ## 常见问题

40
src/image/README.md
View File

@ -14,11 +14,7 @@ Vue.use(Image);
### Basic Usage ### Basic Usage
```html ```html
<van-image <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
``` ```
### Fit Mode ### Fit Mode
@ -68,24 +64,24 @@ Vue.use(Lazyload);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| src | Src | *string* | - | | src | Src | _string_ | - |
| fit | Fit mode | *string* | `fill` | | fit | Fit mode | _string_ | `fill` |
| alt | Alt | *string* | - | | alt | Alt | _string_ | - |
| width | Width | *number \| string* | - | | width | Width | _number \| string_ | - |
| height | Height | *number \| string* | - | | height | Height | _number \| string_ | - |
| radius `v2.1.6` | Border Radius | *number \| string* | `0` | | radius `v2.1.6` | Border Radius | _number \| string_ | `0` |
| round | Whether to be round | *boolean* | `false` | | round | Whether to be round | _boolean_ | `false` |
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` | | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
| show-error `v2.0.9` | Whether to show error placeholder | *boolean* | `true` | | show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
| show-loading `v2.0.9` | Whether to show loading placeholder | *boolean* | `true` | | show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
| error-icon `v2.4.2` | Error icon | *string* | `warning-o` | | error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
| loading-icon `v2.4.2` | Loading icon | *string* | `photo-o` | | loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
### fit optional value ### fit optional value
| name | desctription | | name | desctription |
|------|------| | --- | --- |
| contain | Keep aspect ratio, fully display the long side of the image | | contain | Keep aspect ratio, fully display the long side of the image |
| cover | Keep aspect ratio, fully display the short side of the image, cutting the long side | | cover | Keep aspect ratio, fully display the short side of the image, cutting the long side |
| fill | Stretch and resize image to fill the content box | | fill | Stretch and resize image to fill the content box |
@ -95,14 +91,14 @@ Vue.use(Lazyload);
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | -------------------------------- | -------------- |
| click | Triggered when click image | *event: Event* | | click | Triggered when click image | _event: Event_ |
| load | Triggered when image loaded | - | | load | Triggered when image loaded | - |
| error | Triggered when image load failed | - | | error | Triggered when image load failed | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | -------------------------- |
| loading | Custom loading placeholder | | loading | Custom loading placeholder |
| error | Custom error placeholder | | error | Custom error placeholder |

40
src/image/README.zh-CN.md
View File

@ -20,11 +20,7 @@ Vue.use(Image);
基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性 基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
```html ```html
<van-image <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
``` ```
### 填充模式 ### 填充模式
@ -100,24 +96,24 @@ Vue.use(Lazyload);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| src | 图片链接 | *string* | - | | src | 图片链接 | _string_ | - |
| fit | 图片填充模式 | *string* | `fill` | | fit | 图片填充模式 | _string_ | `fill` |
| alt | 替代文本 | *string* | - | | alt | 替代文本 | _string_ | - |
| width | 宽度，默认单位为`px` | *number \| string* | - | | width | 宽度，默认单位为`px` | _number \| string_ | - |
| height | 高度，默认单位为`px` | *number \| string* | - | | height | 高度，默认单位为`px` | _number \| string_ | - |
| radius `v2.1.6` | 圆角大小，默认单位为`px` | *number \| string* | `0` | | radius `v2.1.6` | 圆角大小，默认单位为`px` | _number \| string_ | `0` |
| round | 是否显示为圆形 | *boolean* | `false` | | round | 是否显示为圆形 | _boolean_ | `false` |
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
| show-error `v2.0.9` | 是否展示图片加载失败提示 | *boolean* | `true` | | show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
| show-loading `v2.0.9` | 是否展示图片加载中提示 | *boolean* | `true` | | show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `warning-o` | | error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `photo-o` | | loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
### 图片填充模式  ### 图片填充模式 
| 名称 | 含义 | | 名称 | 含义 |
|------|------| | ---------- | ------------------------------------------------------ |
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | | contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | | cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
| fill | 拉伸图片，使图片填满元素 | | fill | 拉伸图片，使图片填满元素 |
@ -127,15 +123,15 @@ Vue.use(Lazyload);
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------ | -------------- |
| click | 点击图片时触发 | *event: Event* | | click | 点击图片时触发 | _event: Event_ |
| load | 图片加载完毕时触发 | - | | load | 图片加载完毕时触发 | - |
| error | 图片加载失败时触发 | - | | error | 图片加载失败时触发 | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------------------- |
| loading | 自定义加载中的提示内容 | | loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 | | error | 自定义加载失败时的提示内容 |

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

@ -52,10 +52,10 @@ Vue.use(IndexAnchor);
export default { export default {
data() { data() {
return { return {
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
} };
} },
} };
``` ```
## API ## API
@ -63,27 +63,27 @@ export default {
### IndexBar Props ### IndexBar Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| index-list | Index List | *string[] \| number[]* | `A-Z` | | index-list | Index List | _string[] \| number[]_ | `A-Z` |
| z-index | z-index | *number \| string* | `1` | | z-index | z-index | _number \| string_ | `1` |
| sticky | Whether to enable anchor sticky top | *boolean* | `true` | | sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
| sticky-offset-top `v2.0.7` | Anchor offset top when sticky | *number* | `0` | | sticky-offset-top `v2.0.7` | Anchor offset top when sticky | _number_ | `0` |
| highlight-color | Index character highlight color | *string* | `#07c160` | - | | highlight-color | Index character highlight color | _string_ | `#07c160` | - |
### IndexAnchor Props ### IndexAnchor Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --------- | ----------- | ------------------ | ------- |
| index | Index | *number \| string* | - | | index | Index | _number \| string_ | - |
### IndexBar Events ### IndexBar Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | --------------------------- | --------- |
| select | Triggered when select index | index | | select | Triggered when select index | index |
### IndexAnchor Slots ### IndexAnchor Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------------------------------- |
| default | Anchor content, show index by default | | default | Anchor content, show index by default |

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

@ -56,10 +56,10 @@ Vue.use(IndexAnchor);
export default { export default {
data() { data() {
return { return {
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
} };
} },
} };
``` ```
## API ## API
@ -67,27 +67,27 @@ export default {
### IndexBar Props ### IndexBar Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | | index-list | 索引字符列表 | _string[] \| number[]_ | `A-Z` |
| z-index | z-index 层级 | *number \| string* | `1` | | z-index | z-index 层级 | _number \| string_ | `1` |
| sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | | sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` |
| sticky-offset-top `v2.0.7` | 锚点自动吸顶时与顶部的距离 | *number* | `0` | | sticky-offset-top `v2.0.7` | 锚点自动吸顶时与顶部的距离 | _number_ | `0` |
| highlight-color | 索引字符高亮颜色 | *string* | `#07c160` | | highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` |
### IndexAnchor Props ### IndexAnchor Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ----- | -------- | ------------------ | ------ |
| index | 索引字符 | *number \| string* | - | | index | 索引字符 | _number \| string_ | - |
### IndexBar Events ### IndexBar Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | --------------- |
| select | 选中字符时触发 | index: 索引字符 | | select | 选中字符时触发 | index: 索引字符 |
### IndexAnchor Slots ### IndexAnchor Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------------------------------- |
| default | 锚点位置显示内容，默认为索引字符 | | default | 锚点位置显示内容，默认为索引字符 |

34
src/lazyload/README.md
View File

@ -10,7 +10,7 @@ Vue.use(Lazyload);
// with options // with options
Vue.use(Lazyload, { Vue.use(Lazyload, {
lazyComponent: true lazyComponent: true,
}); });
``` ```
@ -19,7 +19,7 @@ Vue.use(Lazyload, {
### Basic Usage ### Basic Usage
```html ```html
<img v-for="img in imageList" v-lazy="img" > <img v-for="img in imageList" v-lazy="img" />
``` ```
```js ```js
@ -28,11 +28,11 @@ export default {
return { return {
imageList: [ imageList: [
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg' 'https://img.yzcdn.cn/vant/apple-2.jpg',
] ],
};
},
}; };
}
}
``` ```
### Lazyload Background Image ### Lazyload Background Image
@ -48,13 +48,13 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
```js ```js
// set `lazyComponent` option // set `lazyComponent` option
Vue.use(Lazyload, { Vue.use(Lazyload, {
lazyComponent: true lazyComponent: true,
}); });
``` ```
```html ```html
<lazy-component> <lazy-component>
<img v-for="img in imageList" v-lazy="img" > <img v-for="img in imageList" v-lazy="img" />
</lazy-component> </lazy-component>
``` ```
@ -63,14 +63,14 @@ Vue.use(Lazyload, {
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| loading | Src of the image while loading | *string* | - | | loading | Src of the image while loading | _string_ | - |
| error | Src of the image upon load fail | *string* | - | | error | Src of the image upon load fail | _string_ | - |
| preload | Proportion of pre-loading height | *string* | - | | preload | Proportion of pre-loading height | _string_ | - |
| attempt | Attempts count | *number* | `3` | | attempt | Attempts count | _number_ | `3` |
| listenEvents | Events that you want vue listen for | *string[]* | `scroll`... | | listenEvents | Events that you want vue listen for | _string[]_ | `scroll`... |
| adapter | Dynamically modify the attribute of element | *object* | - | | adapter | Dynamically modify the attribute of element | _object_ | - |
| filter | The image's listener filter | *object* | - | | filter | The image's listener filter | _object_ | - |
| lazyComponent | Lazyload component | *boolean* | `false` | | lazyComponent | Lazyload component | _boolean_ | `false` |
> See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload) > See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload)

34
src/lazyload/README.zh-CN.md
View File

@ -12,7 +12,7 @@ Vue.use(Lazyload);
// 注册时可以配置额外的选项 // 注册时可以配置额外的选项
Vue.use(Lazyload, { Vue.use(Lazyload, {
lazyComponent: true lazyComponent: true,
}); });
``` ```
@ -23,7 +23,7 @@ Vue.use(Lazyload, {
将`v-lazy`指令的值设置为你需要懒加载的图片 将`v-lazy`指令的值设置为你需要懒加载的图片
```html ```html
<img v-for="img in imageList" v-lazy="img" > <img v-for="img in imageList" v-lazy="img" />
``` ```
```js ```js
@ -32,11 +32,11 @@ export default {
return { return {
imageList: [ imageList: [
'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg' 'https://img.yzcdn.cn/vant/apple-2.jpg',
] ],
};
},
}; };
}
}
``` ```
### 背景图懒加载 ### 背景图懒加载
@ -54,13 +54,13 @@ export default {
```js ```js
// 注册时设置`lazyComponent`选项 // 注册时设置`lazyComponent`选项
Vue.use(Lazyload, { Vue.use(Lazyload, {
lazyComponent: true lazyComponent: true,
}); });
``` ```
```html ```html
<lazy-component> <lazy-component>
<img v-for="img in imageList" v-lazy="img" > <img v-for="img in imageList" v-lazy="img" />
</lazy-component> </lazy-component>
``` ```
@ -69,14 +69,14 @@ Vue.use(Lazyload, {
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------------- | ---------------- | ---------- | ---------- |
| loading | 加载时的图片 | *string* | - | | loading | 加载时的图片 | _string_ | - |
| error | 错误时的图片 | *string* | - | | error | 错误时的图片 | _string_ | - |
| preload | 预加载高度的比例 | *string* | - | | preload | 预加载高度的比例 | _string_ | - |
| attempt | 尝试次数 | *number* | `3` | | attempt | 尝试次数 | _number_ | `3` |
| listenEvents | 监听的事件 | *string[]* | `scroll`等 | | listenEvents | 监听的事件 | _string[]_ | `scroll`等 |
| adapter | 适配器 | *object* | - | | adapter | 适配器 | _object_ | - |
| filter | 图片 URL 过滤 | *object* | - | | filter | 图片 URL 过滤 | _object_ | - |
| lazyComponent | 是否能懒加载模块 | *boolean* | `false` | | lazyComponent | 是否能懒加载模块 | _boolean_ | `false` |
> 更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload) > 更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)

52
src/list/README.md
View File

@ -34,7 +34,7 @@ export default {
return { return {
list: [], list: [],
loading: false, loading: false,
finished: false finished: false,
}; };
}, },
methods: { methods: {
@ -49,9 +49,9 @@ export default {
this.finished = true; this.finished = true;
} }
}, 1000); }, 1000);
} },
} },
} };
``` ```
### Error Info ### Error Info
@ -73,17 +73,17 @@ export default {
return { return {
list: [], list: [],
error: false, error: false,
loading: false loading: false,
}; };
}, },
methods: { methods: {
onLoad() { onLoad() {
fetchSomeThing().catch(() => { fetchSomeThing().catch(() => {
this.error = true; this.error = true;
}) });
} },
} },
} };
``` ```
### PullRefresh ### PullRefresh
@ -108,7 +108,7 @@ export default {
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
refreshing: false refreshing: false,
}; };
}, },
methods: { methods: {
@ -133,9 +133,9 @@ export default {
this.finished = false; this.finished = false;
this.loading = true; this.loading = true;
this.onLoad(); this.onLoad();
} },
} },
} };
``` ```
## API ## API
@ -143,21 +143,21 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Whether to show loading info，the `load` event will not be triggered when loading | *boolean* | `false` | | v-model | Whether to show loading info，the `load` event will not be triggered when loading | _boolean_ | `false` |
| finished | Whether loading is finished，the `load` event will not be triggered when finished | *boolean* | `false` | | finished | Whether loading is finished，the `load` event will not be triggered when finished | _boolean_ | `false` |
| error | Whether loading is error，the `load` event will be triggered only when error text clicked, the `sync` modifier is needed | *boolean* | `false` | | error | Whether loading is error，the `load` event will be triggered only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` |
| offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | *number \| string* | `300` | | offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | _number \| string_ | `300` |
| loading-text | Loading text | *string* | `Loading...` | | loading-text | Loading text | _string_ | `Loading...` |
| finished-text | Finished text | *string* | - | | finished-text | Finished text | _string_ | - |
| error-text | Error loaded text | *string* | - | | error-text | Error loaded text | _string_ | - |
| immediate-check | Whether to check loading position immediately after mounted | *boolean* | `true` | | immediate-check | Whether to check loading position immediately after mounted | _boolean_ | `true` |
| direction | Scroll direction，can be set to `up` | *string* | `down` | | direction | Scroll direction，can be set to `up` | _string_ | `down` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| load | Triggered when the distance between the scrollbar and the bottom is less than offset | - | | load | Triggered when the distance between the scrollbar and the bottom is less than offset | - |
### Methods ### Methods
@ -165,13 +165,13 @@ export default {
Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | ----- | --------------------- | --------- | ------------ |
| check | Check scroll position | - | - | | check | Check scroll position | - | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | -------- | -------------------- |
| default | List content | | default | List content |
| loading | Custom loading tips | | loading | Custom loading tips |
| finished | Custom finished tips | | finished | Custom finished tips |

53
src/list/README.zh-CN.md
View File

@ -36,7 +36,7 @@ export default {
return { return {
list: [], list: [],
loading: false, loading: false,
finished: false finished: false,
}; };
}, },
methods: { methods: {
@ -56,9 +56,9 @@ export default {
this.finished = true; this.finished = true;
} }
}, 1000); }, 1000);
} },
} },
} };
``` ```
### 错误提示 ### 错误提示
@ -82,17 +82,17 @@ export default {
return { return {
list: [], list: [],
error: false, error: false,
loading: false loading: false,
}; };
}, },
methods: { methods: {
onLoad() { onLoad() {
fetchSomeThing().catch(() => { fetchSomeThing().catch(() => {
this.error = true; this.error = true;
}) });
} },
} },
} };
``` ```
### 下拉刷新 ### 下拉刷新
@ -119,7 +119,7 @@ export default {
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
refreshing: false refreshing: false,
}; };
}, },
methods: { methods: {
@ -148,9 +148,9 @@ export default {
// 将 loading 设置为 true，表示处于加载状态 // 将 loading 设置为 true，表示处于加载状态
this.loading = true; this.loading = true;
this.onLoad(); this.onLoad();
} },
} },
} };
``` ```
## API ## API
@ -158,21 +158,21 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 是否处于加载状态，加载过程中不触发`load`事件 | *boolean* | `false` | | v-model | 是否处于加载状态，加载过程中不触发`load`事件 | _boolean_ | `false` |
| finished | 是否已加载完成，加载完成后不再触发`load`事件 | *boolean* | `false` | | finished | 是否已加载完成，加载完成后不再触发`load`事件 | _boolean_ | `false` |
| error | 是否加载失败，加载失败后点击错误提示可以重新<br>触发`load`事件，必须使用`sync`修饰符 | *boolean* | `false` | | error | 是否加载失败，加载失败后点击错误提示可以重新<br>触发`load`事件，必须使用`sync`修饰符 | _boolean_ | `false` |
| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | *number \| string* | `300` | | offset | 滚动条与底部距离小于 offset 时触发`load`事件 | _number \| string_ | `300` |
| loading-text | 加载过程中的提示文案 | *string* | `加载中...` | | loading-text | 加载过程中的提示文案 | _string_ | `加载中...` |
| finished-text | 加载完成后的提示文案 | *string* | - | | finished-text | 加载完成后的提示文案 | _string_ | - |
| error-text | 加载失败后的提示文案 | *string* | - | | error-text | 加载失败后的提示文案 | _string_ | - |
| immediate-check | 是否在初始化时立即执行滚动位置检查 | *boolean* | `true` | | immediate-check | 是否在初始化时立即执行滚动位置检查 | _boolean_ | `true` |
| direction | 滚动触发加载的方向，可选值为`up` | *string* | `down` | | direction | 滚动触发加载的方向，可选值为`up` | _string_ | `down` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------------------------- | -------- |
| load | 滚动条与底部距离小于 offset 时触发 | - | | load | 滚动条与底部距离小于 offset 时触发 | - |
### 方法 ### 方法
@ -180,13 +180,13 @@ export default {
通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| check | 检查当前的滚动位置，若已滚动至底部，则会触发 load 事件 | - | - | | check | 检查当前的滚动位置，若已滚动至底部，则会触发 load 事件 | - | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | -------- | -------------------------- |
| default | 列表内容 | | default | 列表内容 |
| loading | 自定义底部加载中提示 | | loading | 自定义底部加载中提示 |
| finished | 自定义加载完成后的提示文案 | | finished | 自定义加载完成后的提示文案 |
@ -239,7 +239,6 @@ html,
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
``` ```
这个问题的原因是当元素设置了`overflow-x: hidden`样式时，该元素的`overflow-y`会被浏览器设置为`auto`，而不是默认值`visible`，导致 List 无法正确地判断滚动容器。解决方法是去除该样式，或者在 html 和 body 标签上添加`height: 100%`样式。 这个问题的原因是当元素设置了`overflow-x: hidden`样式时，该元素的`overflow-y`会被浏览器设置为`auto`，而不是默认值`visible`，导致 List 无法正确地判断滚动容器。解决方法是去除该样式，或者在 html 和 body 标签上添加`height: 100%`样式。

23
src/loading/README.md
View File

@ -14,22 +14,19 @@ Vue.use(Loading);
### Type ### Type
```html ```html
<van-loading /> <van-loading /> <van-loading type="spinner" />
<van-loading type="spinner" />
``` ```
### Color ### Color
```html ```html
<van-loading color="#1989fa" /> <van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
``` ```
### Size ### Size
```html ```html
<van-loading size="24" /> <van-loading size="24" /> <van-loading type="spinner" size="24px" />
<van-loading type="spinner" size="24px" />
``` ```
### Text ### Text
@ -49,15 +46,15 @@ Vue.use(Loading);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| color | Loading color | *string* | `#c9c9c9` | | color | Loading color | _string_ | `#c9c9c9` |
| type | Can be set to `spinner` | *string* | `circular` | | type | Can be set to `spinner` | _string_ | `circular` |
| size | Icon size | *number \| string* | `30px` | | size | Icon size | _number \| string_ | `30px` |
| text-size | Text font size | *number \| string* | `14px` | | text-size | Text font size | _number \| string_ | `14px` |
| vertical | Whether to arrange icons and text content vertically | *boolean* | `false` | | vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------ |
| default | Loading text | | default | Loading text |

23
src/loading/README.zh-CN.md
View File

@ -16,8 +16,7 @@ Vue.use(Loading);
通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner` 通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner`
```html ```html
<van-loading /> <van-loading /> <van-loading type="spinner" />
<van-loading type="spinner" />
``` ```
### 自定义颜色 ### 自定义颜色
@ -25,8 +24,7 @@ Vue.use(Loading);
通过`color`属性设置加载图标的颜色 通过`color`属性设置加载图标的颜色
```html ```html
<van-loading color="#1989fa" /> <van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
``` ```
### 自定义大小 ### 自定义大小
@ -34,8 +32,7 @@ Vue.use(Loading);
通过`size`属性设置加载图标的大小，默认单位为`px` 通过`size`属性设置加载图标的大小，默认单位为`px`
```html ```html
<van-loading size="24" /> <van-loading size="24" /> <van-loading type="spinner" size="24px" />
<van-loading type="spinner" size="24px" />
``` ```
### 加载文案 ### 加载文案
@ -59,15 +56,15 @@ Vue.use(Loading);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --------- | ---------------------------- | ------------------ | ---------- |
| color | 颜色 | *string* | `#c9c9c9` | | color | 颜色 | _string_ | `#c9c9c9` |
| type | 类型，可选值为 `spinner` | *string* | `circular` | | type | 类型，可选值为 `spinner` | _string_ | `circular` |
| size | 加载图标大小，默认单位为`px` | *number \| string* | `30px` | | size | 加载图标大小，默认单位为`px` | _number \| string_ | `30px` |
| text-size | 文字大小，默认单位为`px` | *number \| string* | `14px` | | text-size | 文字大小，默认单位为`px` | _number \| string_ | `14px` |
| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | | vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | -------- |
| default | 加载文案 | | default | 加载文案 |

8
src/locale/README.md
View File

@ -25,9 +25,9 @@ import { Locale } from 'vant';
const messages = { const messages = {
'en-US': { 'en-US': {
vanPicker: { vanPicker: {
confirm: 'Close' confirm: 'Close',
} },
} },
}; };
Locale.add(messages); Locale.add(messages);
@ -38,7 +38,7 @@ Locale.add(messages);
Current supported languages: Current supported languages:
| Language | Filename | | Language | Filename |
|------|------| | ------------------------ | -------- |
| Chinese | zh-CN | | Chinese | zh-CN |
| Traditional Chinese (HK) | zh-HK | | Traditional Chinese (HK) | zh-HK |
| Traditional Chinese (TW) | zh-TW | | Traditional Chinese (TW) | zh-TW |

8
src/locale/README.zh-CN.md
View File

@ -25,9 +25,9 @@ import { Locale } from 'vant';
const messages = { const messages = {
'zh-CN': { 'zh-CN': {
vanPicker: { vanPicker: {
confirm: '关闭' // 将'确认'修改为'关闭' confirm: '关闭', // 将'确认'修改为'关闭'
} },
} },
}; };
Locale.add(messages); Locale.add(messages);
@ -38,7 +38,7 @@ Locale.add(messages);
目前支持的语言: 目前支持的语言:
| 语言 | 文件名 | | 语言 | 文件名 |
|------|------| | -------------- | ------ |
| 简体中文 | zh-CN | | 简体中文 | zh-CN |
| 繁體中文（港） | zh-HK | | 繁體中文（港） | zh-HK |
| 繁體中文（台） | zh-TW | | 繁體中文（台） | zh-TW |

28
src/nav-bar/README.md
View File

@ -34,9 +34,9 @@ export default {
}, },
onClickRight() { onClickRight() {
Toast('Button'); Toast('Button');
} },
} },
} };
``` ```
### Use Slot ### Use Slot
@ -54,20 +54,20 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| title | Title | *string* | `''` | | title | Title | _string_ | `''` |
| left-text | Left Text | *string* | `''` | | left-text | Left Text | _string_ | `''` |
| right-text | Right Text | *string* | `''` | | right-text | Right Text | _string_ | `''` |
| left-arrow | Whether to show left arrow | *boolean* | `false` | | left-arrow | Whether to show left arrow | _boolean_ | `false` |
| border | Whether to show bottom border | *boolean* | `true` | | border | Whether to show bottom border | _boolean_ | `true` |
| fixed | Whether to fixed top | *boolean* | `false` | | fixed | Whether to fixed top | _boolean_ | `false` |
| placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | *boolean* | `false` | | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
| z-index | Z-index | *number \| string* | `1` | | z-index | Z-index | _number \| string_ | `1` |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ----- | ------------------------- |
| title | Custom title | | title | Custom title |
| left | Custom left side content | | left | Custom left side content |
| right | Custom right side content | | right | Custom right side content |
@ -75,6 +75,6 @@ export default {
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----------- | --------------------------------- | --------- |
| click-left | Triggered when click left button | - | | click-left | Triggered when click left button | - |
| click-right | Triggered when click right button | - | | click-right | Triggered when click right button | - |

28
src/nav-bar/README.zh-CN.md
View File

@ -34,9 +34,9 @@ export default {
}, },
onClickRight() { onClickRight() {
Toast('按钮'); Toast('按钮');
} },
} },
} };
``` ```
### 使用插槽 ### 使用插槽
@ -56,20 +56,20 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| title | 标题 | *string* | `''` | | title | 标题 | _string_ | `''` |
| left-text | 左侧文案 | *string* | `''` | | left-text | 左侧文案 | _string_ | `''` |
| right-text | 右侧文案 | *string* | `''` | | right-text | 右侧文案 | _string_ | `''` |
| left-arrow | 是否显示左侧箭头 | *boolean* | `false` | | left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
| border | 是否显示下边框 | *boolean* | `true` | | border | 是否显示下边框 | _boolean_ | `true` |
| fixed | 是否固定在顶部 | *boolean* | `false` | | fixed | 是否固定在顶部 | _boolean_ | `false` |
| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | *boolean* | `false` | | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
| z-index | 元素 z-index | *number \| string* | `1` | | z-index | 元素 z-index | _number \| string_ | `1` |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ----- | ------------------ |
| title | 自定义标题 | | title | 自定义标题 |
| left | 自定义左侧区域内容 | | left | 自定义左侧区域内容 |
| right | 自定义右侧区域内容 | | right | 自定义右侧区域内容 |
@ -77,6 +77,6 @@ export default {
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ----------- | ------------------ | -------- |
| click-left | 点击左侧按钮时触发 | - | | click-left | 点击左侧按钮时触发 | - |
| click-right | 点击右侧按钮时触发 | - | | click-right | 点击右侧按钮时触发 | - |

34
src/notice-bar/README.md
View File

@ -48,11 +48,7 @@ Vue.use(NoticeBar);
### Custom Style ### Custom Style
```html ```html
<van-notice-bar <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"
>
Notice Content Notice Content
</van-notice-bar> </van-notice-bar>
``` ```
@ -62,28 +58,28 @@ Vue.use(NoticeBar);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| mode | Mode, can be set to `closeable` `link` | *string* | `''` | | mode | Mode, can be set to `closeable` `link` | _string_ | `''` |
| text | Notice text content | *string* | `''` | - | | text | Notice text content | _string_ | `''` | - |
| color | Text color | *string* | `#f60` | | color | Text color | _string_ | `#f60` |
| background | Background color | *string* | `#fff7cc` | | background | Background color | _string_ | `#fff7cc` |
| left-icon | Left Icon | *string* | - | | left-icon | Left Icon | _string_ | - |
| delay | Animation delay (s) | *number \| string* | `1` | | delay | Animation delay (s) | _number \| string_ | `1` |
| speed | Scroll speed (px/s) | *number \| string* | `50` | | speed | Scroll speed (px/s) | _number \| string_ | `50` |
| scrollable | Whether to scroll content | *boolean* | `true` | | scrollable | Whether to scroll content | _boolean_ | `true` |
| wrapable | Whether to enable text wrap | *boolean* | `false` | - | | wrapable | Whether to enable text wrap | _boolean_ | `false` | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ------------------------------ | -------------- |
| click | Triggered when click NoticeBar | *event: Event* | | click | Triggered when click NoticeBar | _event: Event_ |
| close | Triggered when closed | *event: Event* | | close | Triggered when closed | _event: Event_ |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ------------------- |
| default | Notice text content | | default | Notice text content |
| left-icon | Custom left icon | | left-icon | Custom left icon |
| right-icon | Custom right icon | | right-icon | Custom right icon |

34
src/notice-bar/README.zh-CN.md
View File

@ -56,11 +56,7 @@ Vue.use(NoticeBar);
### 自定义样式 ### 自定义样式
```html ```html
<van-notice-bar <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"
>
通知内容 通知内容
</van-notice-bar> </van-notice-bar>
``` ```
@ -70,28 +66,28 @@ Vue.use(NoticeBar);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| mode | 通知栏模式，可选值为 `closeable` `link` | *string* | `''` | | mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
| text | 通知文本内容 | *string* | `''` | | text | 通知文本内容 | _string_ | `''` |
| color | 文本颜色 | *string* | `#f60` | | color | 文本颜色 | _string_ | `#f60` |
| background | 滚动条背景 | *string* | `#fff7cc` | | background | 滚动条背景 | _string_ | `#fff7cc` |
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
| delay | 动画延迟时间 (s) | *number \| string* | `1` | | delay | 动画延迟时间 (s) | _number \| string_ | `1` |
| speed | 滚动速率 (px/s) | *number \| string* | `50` | | speed | 滚动速率 (px/s) | _number \| string_ | `50` |
| scrollable | 是否在长度溢出时滚动播放 | *boolean* | `true` | | scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` |
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | *boolean* | `false` | | wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------- | -------------- |
| click | 点击通知栏时触发 | *event: Event* | | click | 点击通知栏时触发 | _event: Event_ |
| close | 关闭通知栏时触发 | *event: Event* | | close | 关闭通知栏时触发 | _event: Event_ |
### Slots ### Slots
| 名称 | 内容 | | 名称 | 内容 |
|------|------| | ---------- | -------------- |
| default | 通知文本内容 | | default | 通知文本内容 |
| left-icon | 自定义左侧图标 | | left-icon | 自定义左侧图标 |
| right-icon | 自定义右侧图标 | | right-icon | 自定义右侧图标 |

34
src/notify/README.md
View File

@ -32,25 +32,25 @@ Notify({ type: 'warning', message: 'Notify Message' });
Notify({ Notify({
message: 'Custom Color', message: 'Custom Color',
color: '#ad0000', color: '#ad0000',
background: '#ffe1e1' background: '#ffe1e1',
}); });
Notify({ Notify({
message: 'Custom Duration', message: 'Custom Duration',
duration: 1000 duration: 1000,
}); });
``` ```
### $notify Method ### \$notify Method
After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component. After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
```js ```js
export default { export default {
mounted() { mounted() {
this.$notify('Notify Message'); this.$notify('Notify Message');
} },
} };
``` ```
## API ## API
@ -58,7 +58,7 @@ export default {
### Methods ### Methods
| Methods | Attribute | Return value | Description | | Methods | Attribute | Return value | Description |
|------|------|------|------| | --- | --- | --- | --- |
| Notify | `options | message` | notify instance | Show notify | | Notify | `options | message` | notify instance | Show notify |
| Notify.clear | - | `void` | Close notify | | Notify.clear | - | `void` | Close notify |
| Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies | | Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies |
@ -67,13 +67,13 @@ export default {
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| type `v2.1.6` | Can be set to `primary` `success` `warning` | *string* | `danger` | | type `v2.1.6` | Can be set to `primary` `success` `warning` | _string_ | `danger` |
| message | Message | *string* | - | | message | Message | _string_ | - |
| duration | Duration(ms), won't disappear if value is 0 | *number \| string* | `3000` | | duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` |
| color | Message color | *string* | `white` | | | color | Message color | _string_ | `white` | |
| background | Background color | *string* | - | | background | Background color | _string_ | - |
| className | Custom className | *any* | - | | className | Custom className | _any_ | - |
| onClick | Callback function after click | *Function* | - | | onClick | Callback function after click | _Function_ | - |
| onOpened | Callback function after opened | *Function* | - | | onOpened | Callback function after opened | _Function_ | - |
| onClose | Callback function after close | *Function* | - | | onClose | Callback function after close | _Function_ | - |

32
src/notify/README.zh-CN.md
View File

@ -43,25 +43,25 @@ Notify({ type: 'warning', message: '通知内容' });
Notify({ Notify({
message: '自定义颜色', message: '自定义颜色',
color: '#ad0000', color: '#ad0000',
background: '#ffe1e1' background: '#ffe1e1',
}); });
Notify({ Notify({
message: '自定义时长', message: '自定义时长',
duration: 1000 duration: 1000,
}); });
``` ```
### 组件内调用 ### 组件内调用
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。 引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。
```js ```js
export default { export default {
mounted() { mounted() {
this.$notify('提示文案'); this.$notify('提示文案');
} },
} };
``` ```
## API ## API
@ -69,7 +69,7 @@ export default {
### 方法 ### 方法
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| Notify | 展示提示 | `options | message` | notify 实例 | | Notify | 展示提示 | `options | message` | notify 实例 |
| Notify.clear | 关闭提示 | - | `void` | | Notify.clear | 关闭提示 | - | `void` |
| Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` | | Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
@ -78,13 +78,13 @@ export default {
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| type `v2.1.6` | 类型，可选值为 `primary` `success` `warning` | *string* | `danger` | | type `v2.1.6` | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` |
| message | 展示文案，支持通过`\n`换行 | *string* | - | | message | 展示文案，支持通过`\n`换行 | _string_ | - |
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | *number \| string* | `3000` | | duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number \| string_ | `3000` |
| color | 字体颜色 | *string* | `white` | | color | 字体颜色 | _string_ | `white` |
| background | 背景颜色 | *string* | - | | background | 背景颜色 | _string_ | - |
| className | 自定义类名 | *any* | - | | className | 自定义类名 | _any_ | - |
| onClick | 点击时的回调函数 | *Function* | - | | onClick | 点击时的回调函数 | _Function_ | - |
| onOpened | 完全展示后的回调函数 | *Function* | - | | onOpened | 完全展示后的回调函数 | _Function_ | - |
| onClose | 关闭时的回调函数 | *Function* | - | | onClose | 关闭时的回调函数 | _Function_ | - |

50
src/number-keyboard/README.md
View File

@ -33,8 +33,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
show: true show: true,
} };
}, },
methods: { methods: {
onInput(value) { onInput(value) {
@ -42,9 +42,9 @@ export default {
}, },
onDelete() { onDelete() {
Toast('delete'); Toast('delete');
} },
} },
} };
``` ```
### Custom Style ### Custom Style
@ -84,10 +84,10 @@ export default {
data() { data() {
return { return {
show: false, show: false,
value: '' value: '',
} };
} },
} };
``` ```
### Bottom Left Button Content ### Bottom Left Button Content
@ -134,25 +134,25 @@ Use `title` prop to set keyboard title
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model `v2.0.2` | Current value | *string* | - | | v-model `v2.0.2` | Current value | _string_ | - |
| show | Whether to show keyboard | *boolean* | - | | show | Whether to show keyboard | _boolean_ | - |
| theme | Keyboard theme，can be set to `default` `custom` | *string* | `default` | | theme | Keyboard theme，can be set to `default` `custom` | _string_ | `default` |
| title | Keyboard title | *string* | - | | title | Keyboard title | _string_ | - |
| maxlength `v2.0.2` | Value maxlength | *number \| string* | - | | maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
| transition | Whether to show transition animation | *boolean* | `true` | | transition | Whether to show transition animation | _boolean_ | `true` |
| z-index | Keyboard z-index | *number \| string* | `100` | | z-index | Keyboard z-index | _number \| string_ | `100` |
| extra-key | Content of bottom left key | *string* | `''` | | extra-key | Content of bottom left key | _string_ | `''` |
| close-button-text | Close button text | *string* | `-` | | close-button-text | Close button text | _string_ | `-` |
| delete-button-text | Delete button text | *string* | `delete` | | delete-button-text | Delete button text | _string_ | `delete` |
| show-delete-key `v2.5.9` | Whether to show delete button | *boolean* | `true` | | show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
| hide-on-click-outside | Whether to hide keyboard when click outside | *boolean* | `true` | | hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| input | Triggered when keydown | key: Content of the key | | input | Triggered when keydown | key: Content of the key |
| delete | Triggered when press delete key | - | | delete | Triggered when press delete key | - |
| close | Triggered when click close button | - | | close | Triggered when click close button | - |
@ -163,7 +163,7 @@ Use `title` prop to set keyboard title
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ------------------------- |
| delete | Custom delete key content | | delete | Custom delete key content |
| extra-key | Custom extra key content | | extra-key | Custom extra key content |
| title-left | Custom title left content | | title-left | Custom title left content |

52
src/number-keyboard/README.zh-CN.md
View File

@ -37,8 +37,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
show: true show: true,
} };
}, },
methods: { methods: {
onInput(value) { onInput(value) {
@ -46,9 +46,9 @@ export default {
}, },
onDelete() { onDelete() {
Toast('删除'); Toast('删除');
} },
} },
} };
``` ```
### 自定义样式 ### 自定义样式
@ -90,10 +90,10 @@ export default {
data() { data() {
return { return {
show: false, show: false,
value: '' value: '',
} };
} },
} };
``` ```
### 左下角按键内容 ### 左下角按键内容
@ -140,25 +140,25 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model `v2.0.2` | 当前输入值 | *string* | - | | v-model `v2.0.2` | 当前输入值 | _string_ | - |
| show | 是否显示键盘 | *boolean* | - | | show | 是否显示键盘 | _boolean_ | - |
| theme | 样式风格，可选值为 `default` `custom` | *string* | `default` | | theme | 样式风格，可选值为 `default` `custom` | _string_ | `default` |
| title | 键盘标题 | *string* | - | | title | 键盘标题 | _string_ | - |
| maxlength `v2.0.2` | 输入值最大长度 | *number \| string* | - | | maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
| transition | 是否开启过场动画 | *boolean* | `true` | | transition | 是否开启过场动画 | _boolean_ | `true` |
| z-index | 键盘 z-index | *number \| string* | `100` | | z-index | 键盘 z-index | _number \| string_ | `100` |
| extra-key | 左下角按键内容 | *string* | `''` | | extra-key | 左下角按键内容 | _string_ | `''` |
| close-button-text | 关闭按钮文字，空则不展示 | *string* | `-` | | close-button-text | 关闭按钮文字，空则不展示 | _string_ | `-` |
| delete-button-text | 删除按钮文字 | *string* | `删除` | | delete-button-text | 删除按钮文字 | _string_ | `删除` |
| show-delete-key `v2.5.9` | 是否展示删除按钮 | *boolean* | `true` | | show-delete-key `v2.5.9` | 是否展示删除按钮 | _boolean_ | `true` |
| hide-on-click-outside | 点击外部时是否收起键盘 | *boolean* | `true` | | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------------------ | ------------- |
| input | 点击按键时触发 | key: 按键内容 | | input | 点击按键时触发 | key: 按键内容 |
| delete | 点击删除键时触发 | - | | delete | 点击删除键时触发 | - |
| close | 点击关闭按钮时触发 | - | | close | 点击关闭按钮时触发 | - |
@ -169,9 +169,9 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | -------------------- |
| delete | 自定义删除按键内容 | | delete | 自定义删除按键内容 |
| extra-key | 自定义左下角按键内容 | extra-key | 自定义左下角按键内容 |
| title-left | 自定义标题栏左侧内容 | | title-left | 自定义标题栏左侧内容 |
## 常见问题 ## 常见问题

18
src/overlay/README.md
View File

@ -58,21 +58,21 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| show | Whether to show overlay | *boolean* | `false` | | show | Whether to show overlay | _boolean_ | `false` |
| z-index | z-index | *number \| string* | `1` | | z-index | z-index | _number \| string_ | `1` |
| duration | Animation duration | *number \| string* | `0.3` | | duration | Animation duration | _number \| string_ | `0.3` |
| class-name | ClassName | *string* | - | | class-name | ClassName | _string_ | - |
| custom-class `v2.2.5` | Custom style | *object* | - | | custom-class `v2.2.5` | Custom style | _object_ | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | ---------------------- | -------------- |
| click | Triggered when clicked | *event: Event* | | click | Triggered when clicked | _event: Event_ |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ---------------- | ------------ |
| default `v2.2.5` | Default slot | | default `v2.2.5` | Default slot |

18
src/overlay/README.zh-CN.md
View File

@ -64,21 +64,21 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --------------------- | ---------------- | ------------------ | ------- |
| show | 是否展示遮罩层 | *boolean* | `false` | | show | 是否展示遮罩层 | _boolean_ | `false` |
| z-index | z-index 层级 | *number \| string* | `1` | | z-index | z-index 层级 | _number \| string_ | `1` |
| duration | 动画时长，单位秒 | *number \| string* | `0.3` | | duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
| class-name | 自定义类名 | *string* | - | | class-name | 自定义类名 | _string_ | - |
| custom-style `v2.2.5` | 自定义样式 | *object* | - | | custom-style `v2.2.5` | 自定义样式 | _object_ | - |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------- | -------------- |
| click | 点击时触发 | *event: Event* | | click | 点击时触发 | _event: Event_ |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------------- | ---------------------------------- |
| default `v2.0.5` | 默认插槽，用于在遮罩层上方嵌入内容 | | default `v2.0.5` | 默认插槽，用于在遮罩层上方嵌入内容 |

42
src/pagination/README.md
View File

@ -14,31 +14,23 @@ Vue.use(Pagination);
### Basic Usage ### Basic Usage
```html ```html
<van-pagination <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
v-model="currentPage"
:total-items="24"
:items-per-page="5"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentPage: 1 currentPage: 1,
} };
} },
} };
``` ```
### Simple mode ### Simple mode
```html ```html
<van-pagination <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
v-model="currentPage"
:page-count="12"
mode="simple"
/>
``` ```
### Show ellipses ### Show ellipses
@ -57,19 +49,19 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Current page number | *number* | - | | v-model | Current page number | _number_ | - |
| mode | Mode, can be set to `simple` `multi` | *string* | `multi` | | mode | Mode, can be set to `simple` `multi` | _string_ | `multi` |
| prev-text | Previous text | *string* | `Previous` | | prev-text | Previous text | _string_ | `Previous` |
| next-text | Next text | *string* | `Next` | | next-text | Next text | _string_ | `Next` |
| total-items | Total items | *number \| string* | `0` | | total-items | Total items | _number \| string_ | `0` |
| items-per-page | Item number per page | *number \| string* | `10` | | items-per-page | Item number per page | _number \| string_ | `10` |
| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | *number \| string* | `-` | | page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | _number \| string_ | `-` |
| show-page-size | Count of page size to show | *number \| string* | `5` | | show-page-size | Count of page size to show | _number \| string_ | `5` |
| force-ellipses | Whether to show ellipses | *boolean* | `false` | | force-ellipses | Whether to show ellipses | _boolean_ | `false` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | ------------------------ | --------- |
| change | Triggered on page change | - | | change | Triggered on page change | - |

43
src/pagination/README.zh-CN.md
View File

@ -1,4 +1,3 @@
# Pagination 分页 # Pagination 分页
### 引入 ### 引入
@ -15,31 +14,23 @@ Vue.use(Pagination);
### 基础用法 ### 基础用法
```html ```html
<van-pagination <van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
v-model="currentPage"
:total-items="24"
:items-per-page="5"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
currentPage: 1 currentPage: 1,
} };
} },
} };
``` ```
### 简单模式 ### 简单模式
```html ```html
<van-pagination <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
v-model="currentPage"
:page-count="12"
mode="simple"
/>
``` ```
### 显示省略号 ### 显示省略号
@ -58,19 +49,19 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前页码 | *number* | - | | v-model | 当前页码 | _number_ | - |
| mode | 显示模式，可选值为 `simple` | *string* | `multi` | | mode | 显示模式，可选值为 `simple` | _string_ | `multi` |
| prev-text | 上一页按钮文字 | *string* | `上一页` | | prev-text | 上一页按钮文字 | _string_ | `上一页` |
| next-text | 下一页按钮文字 | *string* | `下一页` | | next-text | 下一页按钮文字 | _string_ | `下一页` |
| page-count | 总页数 | *number \| string* | 根据页数计算 | | page-count | 总页数 | _number \| string_ | 根据页数计算 |
| total-items | 总记录数 | *number \| string* | `0` | | total-items | 总记录数 | _number \| string_ | `0` |
| items-per-page | 每页记录数 | *number \| string* | `10` | | items-per-page | 每页记录数 | _number \| string_ | `10` |
| show-page-size | 显示的页码个数 | *number \| string* | `5` | | show-page-size | 显示的页码个数 | _number \| string_ | `5` |
| force-ellipses | 是否显示省略号 | *boolean* | `false` | | force-ellipses | 是否显示省略号 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------- | -------- |
| change | 页码改变时触发 | - | | change | 页码改变时触发 | - |

12
src/panel/README.md
View File

@ -36,16 +36,16 @@ Vue.use(Panel);
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --------- | ----------- | -------- | ------- |
| icon | Left Icon | *string* | - | | icon | Left Icon | _string_ | - |
| title | Title | *string* | - | | title | Title | _string_ | - |
| desc | Description | *string* | - | | desc | Description | _string_ | - |
| status | Status | *string* | - | | status | Status | _string_ | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ------- | ------------- |
| default | Default slot | | default | Default slot |
| header | Custom header | | header | Custom header |
| footer | Custom footer | | footer | Custom footer |

12
src/panel/README.zh-CN.md
View File

@ -40,16 +40,16 @@ Vue.use(Panel);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | ------ | ------------------------------------------ | -------- | ------ |
| title | 标题 | *string* | - | | title | 标题 | _string_ | - |
| desc | 描述 | *string* | - | | desc | 描述 | _string_ | - |
| status | 状态 | *string* | - | | status | 状态 | _string_ | - |
| icon | 标题左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | icon | 标题左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ------- | ------------- |
| default | 自定义内容 | | default | 自定义内容 |
| header | 自定义 header | | header | 自定义 header |
| footer | 自定义 footer | | footer | 自定义 footer |

35
src/password-input/README.md
View File

@ -40,7 +40,7 @@ export default {
data() { data() {
return { return {
value: '123', value: '123',
showKeyboard: true showKeyboard: true,
}; };
}, },
methods: { methods: {
@ -49,9 +49,9 @@ export default {
}, },
onDelete() { onDelete() {
this.value = this.value.slice(0, this.value.length - 1); this.value = this.value.slice(0, this.value.length - 1);
} },
} },
} };
``` ```
### Custom length ### Custom length
@ -105,7 +105,7 @@ export default {
return { return {
value: '123', value: '123',
showKeyboard: true, showKeyboard: true,
errorInfo: '' errorInfo: '',
}; };
}, },
methods: { methods: {
@ -119,26 +119,27 @@ export default {
}, },
onDelete() { onDelete() {
this.value = this.value.slice(0, this.value.length - 1); this.value = this.value.slice(0, this.value.length - 1);
} },
} },
} };
``` ```
## API ## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| value | Password value | *string* | `''` | | value | Password value | _string_ | `''` |
| info | Bottom info | *string* | - | | info | Bottom info | _string_ | - |
| error-info | Bottom error info | *string* | - | | error-info | Bottom error info | _string_ | - |
| length | Maxlength of password | *number \| string* | `6` | | length | Maxlength of password | _number \| string_ | `6` |
| gutter | Gutter of input | *number \| string* | `0` | | gutter | Gutter of input | _number \| string_ | `0` |
| mask | Whether to mask value | *boolean* | `true` | | mask | Whether to mask value | _boolean_ | `true` |
| focused `v2.1.8` | Whether to show focused cursor | *boolean* | `false` | | focused `v2.1.8` | Whether to show focused cursor | _boolean_ | `false` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ----- | -------------------------------- | --------- |
| focus | Triggered when input get focused | - | | focus | Triggered when input get focused | - |

34
src/password-input/README.zh-CN.md
View File

@ -40,7 +40,7 @@ export default {
data() { data() {
return { return {
value: '123', value: '123',
showKeyboard: true showKeyboard: true,
}; };
}, },
methods: { methods: {
@ -49,9 +49,9 @@ export default {
}, },
onDelete() { onDelete() {
this.value = this.value.slice(0, this.value.length - 1); this.value = this.value.slice(0, this.value.length - 1);
} },
} },
} };
``` ```
### 自定义长度 ### 自定义长度
@ -104,7 +104,7 @@ export default {
return { return {
value: '123', value: '123',
showKeyboard: true, showKeyboard: true,
errorInfo: '' errorInfo: '',
}; };
}, },
methods: { methods: {
@ -118,9 +118,9 @@ export default {
}, },
onDelete() { onDelete() {
this.value = this.value.slice(0, this.value.length - 1); this.value = this.value.slice(0, this.value.length - 1);
} },
} },
} };
``` ```
## API ## API
@ -128,17 +128,17 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| value | 密码值 | *string* | `''` | | value | 密码值 | _string_ | `''` |
| info | 输入框下方文字提示 | *string* | - | | info | 输入框下方文字提示 | _string_ | - |
| error-info | 输入框下方错误提示 | *string* | - | | error-info | 输入框下方错误提示 | _string_ | - |
| length | 密码最大长度 | *number \| string* | `6` | | length | 密码最大长度 | _number \| string_ | `6` |
| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | *number \| string* | `0` | | gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `0` |
| mask | 是否隐藏密码内容 | *boolean* | `true` | | mask | 是否隐藏密码内容 | _boolean_ | `true` |
| focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | *boolean* | `false` | | focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------- | -------- |
| focus | 输入框聚焦时触发 | - | | focus | 输入框聚焦时触发 | - |

142
src/picker/README.md
View File

@ -27,25 +27,21 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
}; };
}, },
methods: { methods: {
onChange(picker, value, index) { onChange(picker, value, index) {
Toast(`Value: ${value}, Index: ${index}`); Toast(`Value: ${value}, Index: ${index}`);
} },
} },
}; };
``` ```
### Default Index ### Default Index
```html ```html
<van-picker <van-picker :columns="columns" :default-index="2" @change="onChange" />
:columns="columns"
:default-index="2"
@change="onChange"
/>
``` ```
### Show Toolbar ### Show Toolbar
@ -66,8 +62,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
} };
}, },
methods: { methods: {
onConfirm(value, index) { onConfirm(value, index) {
@ -75,8 +71,8 @@ export default {
}, },
onCancel() { onCancel() {
Toast('Cancel'); Toast('Cancel');
} },
} },
}; };
``` ```
@ -93,15 +89,15 @@ export default {
columns: [ columns: [
{ {
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'], values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
defaultIndex: 2 defaultIndex: 2,
}, },
{ {
values: ['Morging', 'Afternoon', 'Evening'], values: ['Morging', 'Afternoon', 'Evening'],
defaultIndex: 1 defaultIndex: 1,
} },
] ],
}; };
} },
}; };
``` ```
@ -115,27 +111,36 @@ export default {
export default { export default {
data() { data() {
return { return {
columns: [{ columns: [
{
text: 'Zhejiang', text: 'Zhejiang',
children: [{ children: [
{
text: 'Hangzhou', text: 'Hangzhou',
children: [{ text: 'Xihu' }, { text: 'Yuhang' }] children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
}, { },
{
text: 'Wenzhou', text: 'Wenzhou',
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }] children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
}] },
}, { ],
},
{
text: 'Fujian', text: 'Fujian',
children: [{ children: [
{
text: 'Fuzhou', text: 'Fuzhou',
children: [{ text: 'Gulou' }, { text: 'Taijiang' }] children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
}, { },
{
text: 'Xiamen', text: 'Xiamen',
children: [{ text: 'Siming' }, { text: 'Haicang' }] children: [{ text: 'Siming' }, { text: 'Haicang' }],
}] },
}] ],
},
],
}; };
} },
}; };
``` ```
@ -152,10 +157,10 @@ export default {
columns: [ columns: [
{ text: 'Delaware', disabled: true }, { text: 'Delaware', disabled: true },
{ text: 'Florida' }, { text: 'Florida' },
{ text: 'Georqia' } { text: 'Georqia' },
] ],
}; };
} },
}; };
``` ```
@ -167,24 +172,21 @@ export default {
```js ```js
const states = { const states = {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas'] Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
}; };
export default { export default {
data() { data() {
return { return {
columns: [ columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
{ values: Object.keys(states) },
{ values: states.Group1 }
]
}; };
}, },
methods: { methods: {
onChange(picker, values) { onChange(picker, values) {
picker.setColumnValues(1, states[values[0]]); picker.setColumnValues(1, states[values[0]]);
} },
} },
}; };
``` ```
@ -201,7 +203,7 @@ export default {
data() { data() {
return { return {
columns: [], columns: [],
loading: true loading: true,
}; };
}, },
created() { created() {
@ -209,7 +211,7 @@ export default {
this.loading = false; this.loading = false;
this.columns = ['Option']; this.columns = ['Option'];
}, 1000); }, 1000);
} },
}; };
``` ```
@ -240,15 +242,15 @@ export default {
return { return {
value: '', value: '',
showPicker: false, showPicker: false,
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
} };
}, },
methods: { methods: {
onConfirm(value) { onConfirm(value) {
this.value = value; this.value = value;
this.showPicker = false; this.showPicker = false;
} },
} },
}; };
``` ```
@ -257,27 +259,27 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| columns | Columns data | *Column[]* | `[]` | | columns | Columns data | _Column[]_ | `[]` |
| title | Toolbar title | *string* | - | | title | Toolbar title | _string_ | - |
| confirm-button-text | Text of confirm button | *string* | `Confirm` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | *string* | `Cancel` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` |
| value-key | Key of option text | *string* | `text` | | value-key | Key of option text | _string_ | `text` |
| toolbar-position | Toolbar position, cat be set to `bottom` | *string* | `top` | | toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
| loading | Whether to show loading prompt | *boolean* | `false` | | loading | Whether to show loading prompt | _boolean_ | `false` |
| show-toolbar | Whether to show toolbar | *boolean* | `false` | | show-toolbar | Whether to show toolbar | _boolean_ | `false` |
| allow-html `v2.1.8` | Whether to allow HTML in option text | *boolean* | `true` | | allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
| default-index | Default value index of single column picker | *number \| string* | `0` | | default-index | Default value index of single column picker | _number \| string_ | `0` |
| item-height | Option height | *number \| string* | `44` | | item-height | Option height | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | *number \| string* | `5` | | visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | | swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
### Events ### Events
Picker events will pass different parameters according to the columns are single or multiple Picker events will pass different parameters according to the columns are single or multiple
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | --- | --- | --- |
| confirm | Triggered when click confirm button | Single column：current value，current index<br>Multiple columns：current values，current indexes | | confirm | Triggered when click confirm button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
| cancel | Triggered when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes | | cancel | Triggered when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
| change | Triggered when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index | | change | Triggered when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index |
@ -285,7 +287,7 @@ Picker events will pass different parameters according to the columns are single
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | -------------- | ---------------------------- |
| default | Custom toolbar content | | default | Custom toolbar content |
| title | Custom title | | title | Custom title |
| columns-top | Custom content above columns | | columns-top | Custom content above columns |
@ -294,18 +296,18 @@ Picker events will pass different parameters according to the columns are single
### Data Structure of Column ### Data Structure of Column
| Key | Description | Type | | Key | Description | Type |
|------|------|------| | ----------------- | ------------------------- | ---------- |
| values | Value of column | *string[]* | | values | Value of column | _string[]_ |
| defaultIndex | Default value index | *number* | | defaultIndex | Default value index | _number_ |
| className | ClassName for this column | *any* | | className | ClassName for this column | _any_ |
| children `v2.4.5` | Cascade children | *Column* | | children `v2.4.5` | Cascade children | _Column_ |
### Methods ### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
|------|------|------|------| | --- | --- | --- | --- |
| getValues | Get current values of all columns | - | values | | getValues | Get current values of all columns | - | values |
| setValues | Set current values of all columns | values | - | | setValues | Set current values of all columns | values | - |
| getIndexes | Get current indexes of all columns | - | indexes | | getIndexes | Get current indexes of all columns | - | indexes |

136
src/picker/README.zh-CN.md
View File

@ -29,14 +29,14 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
}; };
}, },
methods: { methods: {
onChange(picker, value, index) { onChange(picker, value, index) {
Toast(`当前值：${value}, 当前索引：${index}`); Toast(`当前值：${value}, 当前索引：${index}`);
} },
} },
}; };
``` ```
@ -68,8 +68,8 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
} };
}, },
methods: { methods: {
onConfirm(value, index) { onConfirm(value, index) {
@ -77,8 +77,8 @@ export default {
}, },
onCancel() { onCancel() {
Toast('取消'); Toast('取消');
} },
} },
}; };
``` ```
@ -98,16 +98,16 @@ export default {
// 第一列 // 第一列
{ {
values: ['周一', '周二', '周三', '周四', '周五'], values: ['周一', '周二', '周三', '周四', '周五'],
defaultIndex: 2 defaultIndex: 2,
}, },
// 第二列 // 第二列
{ {
values: ['上午', '下午', '晚上'], values: ['上午', '下午', '晚上'],
defaultIndex: 1 defaultIndex: 1,
} },
] ],
}; };
} },
}; };
``` ```
@ -123,27 +123,36 @@ export default {
export default { export default {
data() { data() {
return { return {
columns: [{ columns: [
{
text: '浙江', text: '浙江',
children: [{ children: [
{
text: '杭州', text: '杭州',
children: [{ text: '西湖区' }, { text: '余杭区' }] children: [{ text: '西湖区' }, { text: '余杭区' }],
}, { },
{
text: '温州', text: '温州',
children: [{ text: '鹿城区' }, { text: '瓯海区' }] children: [{ text: '鹿城区' }, { text: '瓯海区' }],
}] },
}, { ],
},
{
text: '福建', text: '福建',
children: [{ children: [
{
text: '福州', text: '福州',
children: [{ text: '鼓楼区' }, { text: '台江区' }] children: [{ text: '鼓楼区' }, { text: '台江区' }],
}, { },
{
text: '厦门', text: '厦门',
children: [{ text: '思明区' }, { text: '海沧区' }] children: [{ text: '思明区' }, { text: '海沧区' }],
}] },
}] ],
},
],
}; };
} },
}; };
``` ```
@ -164,10 +173,10 @@ export default {
columns: [ columns: [
{ text: '杭州', disabled: true }, { text: '杭州', disabled: true },
{ text: '宁波' }, { text: '宁波' },
{ text: '温州' } { text: '温州' },
] ],
}; };
} },
}; };
``` ```
@ -181,24 +190,21 @@ export default {
```js ```js
const citys = { const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州'] 福建: ['福州', '厦门', '莆田', '三明', '泉州'],
}; };
export default { export default {
data() { data() {
return { return {
columns: [ columns: [{ values: Object.keys(citys) }, { values: citys['浙江'] }],
{ values: Object.keys(citys) },
{ values: citys['浙江'] }
]
}; };
}, },
methods: { methods: {
onChange(picker, values) { onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]); picker.setColumnValues(1, citys[values[0]]);
} },
} },
}; };
``` ```
@ -215,7 +221,7 @@ export default {
data() { data() {
return { return {
columns: [], columns: [],
loading: true loading: true,
}; };
}, },
created() { created() {
@ -223,7 +229,7 @@ export default {
this.loading = false; this.loading = false;
this.columns = ['选项']; this.columns = ['选项'];
}, 1000); }, 1000);
} },
}; };
``` ```
@ -256,15 +262,15 @@ export default {
return { return {
value: '', value: '',
showPicker: false, showPicker: false,
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
} };
}, },
methods: { methods: {
onConfirm(value) { onConfirm(value) {
this.value = value; this.value = value;
this.showPicker = false; this.showPicker = false;
} },
} },
}; };
``` ```
@ -273,27 +279,27 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| columns | 对象数组，配置每一列显示的数据 | *Column[]* | `[]` | | columns | 对象数组，配置每一列显示的数据 | _Column[]_ | `[]` |
| title | 顶部栏标题 | *string* | - | | title | 顶部栏标题 | _string_ | - |
| confirm-button-text | 确认按钮文字 | *string* | `确认` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` |
| value-key | 选项对象中，选项文字对应的键名 | *string* | `text` | | value-key | 选项对象中，选项文字对应的键名 | _string_ | `text` |
| toolbar-position | 顶部栏位置，可选值为`bottom` | *string* | `top` | | toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` |
| loading | 是否显示加载状态 | *boolean* | `false` | | loading | 是否显示加载状态 | _boolean_ | `false` |
| show-toolbar | 是否显示顶部栏 | *boolean* | `false` | | show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | *boolean* | `true` | | allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
| default-index | 单列选择时，默认选中项的索引 | *number \| string* | `0` | | default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
| item-height | 选项高度 | *number \| string* | `44` | | item-height | 选项高度 | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | *number \| string* | `5` | | visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | | swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
### Events ### Events
当选择器有多列时，事件回调参数会返回数组 当选择器有多列时，事件回调参数会返回数组
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | --- | --- | --- |
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 | | confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 | | cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 | | change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
@ -301,7 +307,7 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | -------------- | ------------------ |
| default | 自定义顶部栏内容 | | default | 自定义顶部栏内容 |
| title | 自定义标题内容 | | title | 自定义标题内容 |
| columns-top | 自定义选项上方内容 | | columns-top | 自定义选项上方内容 |
@ -312,18 +318,18 @@ export default {
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key` 当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
| 键名 | 说明 | 类型 | | 键名 | 说明 | 类型 |
|------|------|------| | ----------------- | -------------------------- | ---------- |
| values | 列中对应的备选值 | *string[]* | values | 列中对应的备选值 | _string[]_ |
| defaultIndex | 初始选中项的索引，默认为 0 | *number* | | defaultIndex | 初始选中项的索引，默认为 0 | _number_ |
| className | 为对应列添加额外的类名 | *any* | | className | 为对应列添加额外的类名 | _any_ |
| children `v2.4.5` | 级联选项 | *Column* | | children `v2.4.5` | 级联选项 | _Column_ |
### 方法 ### 方法
通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) 通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------| | --- | --- | --- | --- |
| getValues | 获取所有列选中的值 | - | values | | getValues | 获取所有列选中的值 | - | values |
| setValues | 设置所有列选中的值 | values | - | | setValues | 设置所有列选中的值 | values | - |
| getIndexes | 获取所有列选中值对应的索引 | - | indexes | | getIndexes | 获取所有列选中值对应的索引 | - | indexes |

67
src/popup/README.md
View File

@ -22,15 +22,15 @@ Vue.use(Popup);
export default { export default {
data() { data() {
return { return {
show: false show: false,
} };
}, },
methods: { methods: {
showPopup() { showPopup() {
this.show = true; this.show = true;
} },
} },
}; };
``` ```
@ -39,11 +39,7 @@ export default {
Use `position` prop to set popup display position Use `position` prop to set popup display position
```html ```html
<van-popup <van-popup v-model="show" position="top" :style="{ height: '30%' }" />
v-model="show"
position="top"
:style="{ height: '30%' }"
/>
``` ```
### Close Icon ### Close Icon
@ -76,12 +72,7 @@ Use `position` prop to set popup display position
### Round Corner ### Round Corner
```html ```html
<van-popup <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" />
v-model="show"
round
position="bottom"
:style="{ height: '30%' }"
/>
``` ```
### Get Container ### Get Container
@ -104,9 +95,9 @@ export default {
methods: { methods: {
getContainer() { getContainer() {
return document.querySelector('.my-container'); return document.querySelector('.my-container');
} },
} },
} };
``` ```
> Tips: The get-container prop cannot be used on the root node > Tips: The get-container prop cannot be used on the root node
@ -116,30 +107,30 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | Whether to show popup | *boolean* | `false` | | v-model (value) | Whether to show popup | _boolean_ | `false` |
| overlay | Whether to show overlay | *boolean* | `true` | | overlay | Whether to show overlay | _boolean_ | `true` |
| position | Can be set to `top` `bottom` `right` `left` | *string* | `center` | | position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` |
| overlay-class | Custom overlay class | *string* | - | | overlay-class | Custom overlay class | _string_ | - |
| overlay-style | Custom overlay style | *object* | - | | overlay-style | Custom overlay style | _object_ | - |
| duration | Transition duration, unit second | *number \| string* | `0.3` | | duration | Transition duration, unit second | _number \| string_ | `0.3` |
| round `v2.0.7` | Whether to show round corner | *boolean* | `false` | | round `v2.0.7` | Whether to show round corner | _boolean_ | `false` |
| lock-scroll | Whether to lock background scroll | *boolean* | `true` | | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| close-on-popstate `v2.2.10` | Whether to close when popstate | *boolean* | `false` | | close-on-popstate `v2.2.10` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | | close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
| closeable `v2.2.0` | Whether to show close icon | *boolean* | `false` | | closeable `v2.2.0` | Whether to show close icon | _boolean_ | `false` |
| close-icon `v2.2.0` | Close icon name | *string* | `cross` | | close-icon `v2.2.0` | Close icon name | _string_ | `cross` |
| close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | | close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | | transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
| get-container | Return the mount node for Popup | *string \| () => Element* | - | | get-container | Return the mount node for Popup | _string \| () => Element_ | - |
| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | *boolean* | `false` | | safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------------- | ---------------------------- | -------------- |
| click | Triggered when click Popup | *event: Event* | | click | Triggered when click Popup | _event: Event_ |
| open | Triggered when open Popup | - | | open | Triggered when open Popup | - |
| close | Triggered when close Popup | - | | close | Triggered when close Popup | - |
| opened | Triggered when opened Popup | - | | opened | Triggered when opened Popup | - |

67
src/popup/README.zh-CN.md
View File

@ -28,15 +28,15 @@ Vue.use(Popup);
export default { export default {
data() { data() {
return { return {
show: false show: false,
} };
}, },
methods: { methods: {
showPopup() { showPopup() {
this.show = true; this.show = true;
} },
} },
}; };
``` ```
@ -45,11 +45,7 @@ export default {
通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right` 通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
```html ```html
<van-popup <van-popup v-model="show" position="top" :style="{ height: '30%' }" />
v-model="show"
position="top"
:style="{ height: '30%' }"
/>
``` ```
### 关闭图标 ### 关闭图标
@ -86,12 +82,7 @@ export default {
设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式 设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
```html ```html
<van-popup <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" />
v-model="show"
round
position="bottom"
:style="{ height: '30%' }"
/>
``` ```
### 指定挂载位置 ### 指定挂载位置
@ -115,9 +106,9 @@ export default {
// 返回一个特定的 DOM 节点，作为挂载的父节点 // 返回一个特定的 DOM 节点，作为挂载的父节点
getContainer() { getContainer() {
return document.querySelector('.my-container'); return document.querySelector('.my-container');
} },
} },
} };
``` ```
> 注意：使用 get-container 属性的组件不能为根节点 > 注意：使用 get-container 属性的组件不能为根节点
@ -127,30 +118,30 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 是否显示弹出层 | *boolean* | `false` | | v-model (value) | 是否显示弹出层 | _boolean_ | `false` |
| overlay | 是否显示遮罩层 | *boolean* | `true` | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | *string* | `center` | | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
| overlay-class | 自定义遮罩层类名 | *string* | - | | overlay-class | 自定义遮罩层类名 | _string_ | - |
| overlay-style | 自定义遮罩层样式 | *object* | - | | overlay-style | 自定义遮罩层样式 | _object_ | - |
| duration | 动画时长，单位秒 | *number \| string* | `0.3` | | duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
| round `v2.0.7` | 是否显示圆角 | *boolean* | `false` | | round `v2.0.7` | 是否显示圆角 | _boolean_ | `false` |
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | | lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
| close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | *boolean* | `false` | | close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| closeable `v2.2.0` | 是否显示关闭图标 | *boolean* | `false` | | closeable `v2.2.0` | 是否显示关闭图标 | _boolean_ | `false` |
| close-icon `v2.2.0` | 关闭图标名称或图片链接 | *string* | `cross` | | close-icon `v2.2.0` | 关闭图标名称或图片链接 | _string_ | `cross` |
| close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | *string* | `top-right` | | close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | | transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
| get-container | 指定挂载的节点 | *string \| () => Element* | - | | get-container | 指定挂载的节点 | _string \| () => Element_ | - |
| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | | safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------------- | -------------------------- | -------------- |
| click | 点击弹出层时触发 | *event: Event* | | click | 点击弹出层时触发 | _event: Event_ |
| open | 打开弹出层时触发 | - | | open | 打开弹出层时触发 | - |
| close | 关闭弹出层时触发 | - | | close | 关闭弹出层时触发 | - |
| opened | 打开弹出层且动画结束后触发 | - | | opened | 打开弹出层且动画结束后触发 | - |

33
src/progress/README.md
View File

@ -31,22 +31,13 @@ Use 'percentage' prop to set current progress
<van-progress inactive :percentage="50" /> <van-progress inactive :percentage="50" />
``` ```
### Custom Style ### Custom Style
Use `pivot-text` to custom text，use `color` to custom bar color Use `pivot-text` to custom text，use `color` to custom bar color
```html ```html
<van-progress <van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />
pivot-text="Orange" <van-progress pivot-text="Red" color="#ee0a24" :percentage="50" />
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="Red"
color="#ee0a24"
:percentage="50"
/>
<van-progress <van-progress
:percentage="75" :percentage="75"
pivot-text="Purple" pivot-text="Purple"
@ -60,13 +51,13 @@ Use `pivot-text` to custom text，use `color` to custom bar color
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| percentage | Percentage | *number \| string* | `0` | | percentage | Percentage | _number \| string_ | `0` |
| stroke-width `v2.2.1` | Stroke width | *number \| string* | `4px` | | stroke-width `v2.2.1` | Stroke width | _number \| string_ | `4px` |
| color | Color | *string* | `#1989fa` | | color | Color | _string_ | `#1989fa` |
| track-color `v2.2.9` | Track color | *string* | `#e5e5e5` | | track-color `v2.2.9` | Track color | _string_ | `#e5e5e5` |
| pivot-text | Pivot text | *string* | percentage | | pivot-text | Pivot text | _string_ | percentage |
| pivot-color | Pivot text background color | *string* | inherit progress color | | pivot-color | Pivot text background color | _string_ | inherit progress color |
| text-color | Pivot text color | *string* | `white` | | text-color | Pivot text color | _string_ | `white` |
| inactive | Whether to be gray | *boolean* | `false` | | inactive | Whether to be gray | _boolean_ | `false` |
| show-pivot | Whether to show text | *boolean* | `true` | | show-pivot | Whether to show text | _boolean_ | `true` |

32
src/progress/README.zh-CN.md
View File

@ -40,16 +40,8 @@ Vue.use(Progress);
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
```html ```html
<van-progress <van-progress pivot-text="橙色" color="#f2826a" :percentage="25" />
pivot-text="橙色" <van-progress pivot-text="红色" color="#ee0a24" :percentage="50" />
color="#f2826a"
:percentage="25"
/>
<van-progress
pivot-text="红色"
color="#ee0a24"
:percentage="50"
/>
<van-progress <van-progress
:percentage="75" :percentage="75"
pivot-text="紫色" pivot-text="紫色"
@ -63,13 +55,13 @@ Vue.use(Progress);
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| percentage | 进度百分比 | *number \| string* | `0` | | percentage | 进度百分比 | _number \| string_ | `0` |
| stroke-width `v2.2.1` | 进度条粗细，默认单位为`px` | *number \| string* | `4px` | | stroke-width `v2.2.1` | 进度条粗细，默认单位为`px` | _number \| string_ | `4px` |
| color | 进度条颜色 | *string* | `#1989fa` | | color | 进度条颜色 | _string_ | `#1989fa` |
| track-color `v2.2.9` | 轨道颜色 | *string* | `#e5e5e5` | | track-color `v2.2.9` | 轨道颜色 | _string_ | `#e5e5e5` |
| pivot-text | 进度文字内容 | *string* | 百分比 | | pivot-text | 进度文字内容 | _string_ | 百分比 |
| pivot-color | 进度文字背景色 | *string* | 同进度条颜色 | | pivot-color | 进度文字背景色 | _string_ | 同进度条颜色 |
| text-color | 进度文字颜色 | *string* | `white` | | text-color | 进度文字颜色 | _string_ | `white` |
| inactive | 是否置灰 | *boolean* | `false` | | inactive | 是否置灰 | _boolean_ | `false` |
| show-pivot | 是否显示进度文字 | *boolean* | `true` | | show-pivot | 是否显示进度文字 | _boolean_ | `true` |

44
src/pull-refresh/README.md
View File

@ -28,8 +28,8 @@ export default {
data() { data() {
return { return {
count: 0, count: 0,
isLoading: false isLoading: false,
} };
}, },
methods: { methods: {
onRefresh() { onRefresh() {
@ -38,9 +38,9 @@ export default {
this.isLoading = false; this.isLoading = false;
this.count++; this.count++;
}, 1000); }, 1000);
} },
} },
} };
``` ```
### Success Tip ### Success Tip
@ -72,17 +72,11 @@ Use slots to custom tips
</template> </template>
<template #loosing> <template #loosing>
<img <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
class="doge"
src="https://img.yzcdn.cn/vant/doge.png"
/>
</template> </template>
<template #loading> <template #loading>
<img <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
class="doge"
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
/>
</template> </template>
<p>Refresh Count: {{ count }}</p> <p>Refresh Count: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>
@ -102,27 +96,27 @@ Use slots to custom tips
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Loading status | *boolean* | - | | v-model | Loading status | _boolean_ | - |
| pulling-text | Text to show when pulling | *string* | `Pull to refresh...` | | pulling-text | Text to show when pulling | _string_ | `Pull to refresh...` |
| loosing-text | Text to show when loosing | *string* | `Loose to refresh...` | | loosing-text | Text to show when loosing | _string_ | `Loose to refresh...` |
| loading-text | Text to show when loading | *string* | `Loading...` | | loading-text | Text to show when loading | _string_ | `Loading...` |
| success-text | Text to show when loading success | *string* | - | | success-text | Text to show when loading success | _string_ | - |
| success-duration | Success text display duration(ms) | *number \| string* | `500` | | success-duration | Success text display duration(ms) | _number \| string_ | `500` |
| animation-duration | Animation duration | *number \| string* | `300` | | animation-duration | Animation duration | _number \| string_ | `300` |
| head-height `v2.4.2` | Height of head | *number \| string* | `50` | | head-height `v2.4.2` | Height of head | _number \| string_ | `50` |
| disabled | Whether to disable pull refresh | *boolean* | `false` | | disabled | Whether to disable pull refresh | _boolean_ | `false` |
### Events ### Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------- | --------------------------- | ---------- |
| refresh | Triggered when pull refresh | - | | refresh | Triggered when pull refresh | - |
### Slots ### Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
|------|------|------| | ------- | ------------------------------------- | ------------ |
| default | Default slot | - | | default | Default slot | - |
| normal | Content of head when at normal status | - | | normal | Content of head when at normal status | - |
| pulling | Content of head when at pulling | { distance } | | pulling | Content of head when at pulling | { distance } |

44
src/pull-refresh/README.zh-CN.md
View File

@ -28,8 +28,8 @@ export default {
data() { data() {
return { return {
count: 0, count: 0,
isLoading: false isLoading: false,
} };
}, },
methods: { methods: {
onRefresh() { onRefresh() {
@ -38,9 +38,9 @@ export default {
this.isLoading = false; this.isLoading = false;
this.count++; this.count++;
}, 1000); }, 1000);
} },
} },
} };
``` ```
### 成功提示 ### 成功提示
@ -74,18 +74,12 @@ export default {
<!-- 释放提示 --> <!-- 释放提示 -->
<template #loosing> <template #loosing>
<img <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
class="doge"
src="https://img.yzcdn.cn/vant/doge.png"
/>
</template> </template>
<!-- 加载提示 --> <!-- 加载提示 -->
<template #loading> <template #loading>
<img <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
class="doge"
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
/>
</template> </template>
<p>刷新次数: {{ count }}</p> <p>刷新次数: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>
@ -105,27 +99,27 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 是否处于加载中状态 | *boolean* | - | | v-model | 是否处于加载中状态 | _boolean_ | - |
| pulling-text | 下拉过程提示文案 | *string* | `下拉即可刷新...` | | pulling-text | 下拉过程提示文案 | _string_ | `下拉即可刷新...` |
| loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` | | loosing-text | 释放过程提示文案 | _string_ | `释放即可刷新...` |
| loading-text | 加载过程提示文案 | *string* | `加载中...` | | loading-text | 加载过程提示文案 | _string_ | `加载中...` |
| success-text | 刷新成功提示文案 | *string* | - | | success-text | 刷新成功提示文案 | _string_ | - |
| success-duration | 刷新成功提示展示时长(ms) | *number \| string* | `500` | | success-duration | 刷新成功提示展示时长(ms) | _number \| string_ | `500` |
| animation-duration | 动画时长 | *number \| string* | `300` | | animation-duration | 动画时长 | _number \| string_ | `300` |
| head-height `v2.4.2` | 顶部内容高度 | *number \| string* | `50` | | head-height `v2.4.2` | 顶部内容高度 | _number \| string_ | `50` |
| disabled | 是否禁用下拉刷新 | *boolean* | `false` | | disabled | 是否禁用下拉刷新 | _boolean_ | `false` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------- | -------------- | -------- |
| refresh | 下拉刷新时触发 | - | | refresh | 下拉刷新时触发 | - |
### Slots ### Slots
| 名称 | 说明 | SlotProps | | 名称 | 说明 | SlotProps |
|------|------|------| | ------- | -------------------- | -------------------------- |
| default | 自定义内容 | - | | default | 自定义内容 | - |
| normal | 非下拉状态时顶部内容 | - | | normal | 非下拉状态时顶部内容 | - |
| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | | pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } |

64
src/radio/README.md
View File

@ -27,9 +27,9 @@ Use `v-model` to bind the name of checked radio
export default { export default {
data() { data() {
return { return {
radio: '1' radio: '1',
} };
} },
}; };
``` ```
@ -87,19 +87,13 @@ Use icon slot to custom icon
<van-radio name="1"> <van-radio name="1">
Radio 1 Radio 1
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
>
</template> </template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
Radio 2 Radio 2
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template> </template>
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
@ -107,8 +101,8 @@ Use icon slot to custom icon
<style> <style>
.img-icon { .img-icon {
height: 20px; height: 20px;
} }</style
</style>> >>
``` ```
```js ```js
@ -117,9 +111,9 @@ export default {
return { return {
radio: '1', radio: '1',
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
}; };
} },
}; };
``` ```
@ -156,40 +150,40 @@ export default {
### Radio Props ### Radio Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| name | Radio name | *any* | - | | name | Radio name | _any_ | - |
| shape | Can be set to `square` | *string* | `round` | | shape | Can be set to `square` | _string_ | `round` |
| disabled | Whether to disable radio | *boolean* | `false` | | disabled | Whether to disable radio | _boolean_ | `false` |
| label-disabled | Whether to disable label click | *boolean* | `false` | | label-disabled | Whether to disable label click | _boolean_ | `false` |
| label-position | Can be set to `left` | *string* | `right` | | label-position | Can be set to `left` | _string_ | `right` |
| icon-size | Icon size | *number \| string* | `20px` | | icon-size | Icon size | _number \| string_ | `20px` |
| checked-color | Checked color | *string* | `#1989fa` | - | | checked-color | Checked color | _string_ | `#1989fa` | - |
### RadioGroup Props ### RadioGroup Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (v-model) | Name of checked radio | *any* | - | | v-model (v-model) | Name of checked radio | _any_ | - |
| disabled | Disable all radios | *boolean* | `false` | | disabled | Disable all radios | _boolean_ | `false` |
| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` | | direction `v2.5.0` | Direction, can be set to `horizontal` | _string_ | `vertical` |
| icon-size `v2.2.3` | Icon size of all radios | *number \| string* | `20px` | | icon-size `v2.2.3` | Icon size of all radios | _number \| string_ | `20px` |
| checked-color `v2.2.3` | Checked color of all radios | *string* | `#1989fa` | - | | checked-color `v2.2.3` | Checked color of all radios | _string_ | `#1989fa` | - |
### Radio Events ### Radio Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ----- | -------------------------- | -------------- |
| click | Triggered when click radio | *event: Event* | | click | Triggered when click radio | _event: Event_ |
### RadioGroup Events ### RadioGroup Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------ | ---------------------------- | -------------- |
| change | Triggered when value changed | *name: string* | | change | Triggered when value changed | _name: string_ |
### Radio Slots ### Radio Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
|------|------|------| | ------- | ------------ | ------------------ |
| default | Custom label | - | | default | Custom label | - |
| icon | Custom icon | *checked: boolean* | | icon | Custom icon | _checked: boolean_ |

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

@ -27,9 +27,9 @@ Vue.use(RadioGroup);
export default { export default {
data() { data() {
return { return {
radio: '1' radio: '1',
} };
} },
}; };
``` ```
@ -97,19 +97,13 @@ export default {
<van-radio name="1"> <van-radio name="1">
单选框 1 单选框 1
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
>
</template> </template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
单选框 2 单选框 2
<template #icon="props"> <template #icon="props">
<img <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon"
/>
</template> </template>
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
@ -127,10 +121,10 @@ export default {
return { return {
radio: '1', radio: '1',
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
} };
} },
} };
``` ```
### 禁用文本点击 ### 禁用文本点击
@ -170,40 +164,40 @@ export default {
### Radio Props ### Radio Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | -------------- | ------------------------- | ------------------ | --------- |
| name | 标识符 | *any* | - | | name | 标识符 | _any_ | - |
| shape | 形状，可选值为 `square` | *string* | `round` | | shape | 形状，可选值为 `square` | _string_ | `round` |
| disabled | 是否为禁用状态 | *boolean* | `false` | | disabled | 是否为禁用状态 | _boolean_ | `false` |
| label-disabled | 是否禁用文本内容点击 | *boolean* | `false` | | label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
| label-position | 文本位置，可选值为 `left` | *string* | `right` | | label-position | 文本位置，可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小，默认单位为`px` | *number \| string* | `20px` | | icon-size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | *string* | `#1989fa` | | checked-color | 选中状态颜色 | _string_ | `#1989fa` |
### RadioGroup Props ### RadioGroup Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model (value) | 当前选中项的标识符 | *any* | - | | v-model (value) | 当前选中项的标识符 | _any_ | - |
| disabled | 是否禁用所有单选框 | *boolean* | `false` | | disabled | 是否禁用所有单选框 | _boolean_ | `false` |
| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` | | direction `v2.5.0` | 排列方向，可选值为`horizontal` | _string_ | `vertical` |
| icon-size `v2.2.3` | 所有单选框的图标大小，默认单位为`px` | *number \| string* | `20px` | | icon-size `v2.2.3` | 所有单选框的图标大小，默认单位为`px` | _number \| string_ | `20px` |
| checked-color `v2.2.3` | 所有单选框的选中状态颜色 | *string* | `#1989fa` | | checked-color `v2.2.3` | 所有单选框的选中状态颜色 | _string_ | `#1989fa` |
### Radio Events ### Radio Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ---------------- | -------------- |
| click | 点击单选框时触发 | *event: Event* | | click | 点击单选框时触发 | _event: Event_ |
### RadioGroup Events ### RadioGroup Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------------ | -------------- |
| change | 当绑定值变化时触发的事件 | *name: string* | | change | 当绑定值变化时触发的事件 | _name: string_ |
### Radio Slots ### Radio Slots
| 名称 | 说明 | SlotProps | | 名称 | 说明 | SlotProps |
|------|------|------| | ------- | ---------- | ------------------ |
| default | 自定义文本 | - | | default | 自定义文本 | - |
| icon | 自定义图标 | *checked: boolean* | | icon | 自定义图标 | _checked: boolean_ |

63
src/rate/README.md
View File

@ -21,20 +21,16 @@ Vue.use(Rate);
export default { export default {
data() { data() {
return { return {
value: 3 value: 3,
};
},
}; };
}
}
``` ```
### Custom Icon ### Custom Icon
```html ```html
<van-rate <van-rate v-model="value" icon="like" void-icon="like-o" />
v-model="value"
icon="like"
void-icon="like-o"
/>
``` ```
### Custom Style ### Custom Style
@ -52,22 +48,17 @@ export default {
### Half Star ### Half Star
```html ```html
<van-rate <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
v-model="value"
allow-half
void-icon="star"
void-color="#eee"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
value: 2.5 value: 2.5,
};
},
}; };
}
}
``` ```
### Custom Count ### Custom Count
@ -99,9 +90,9 @@ export default {
method: { method: {
onChange(value) { onChange(value) {
Toast('current value:' + value); Toast('current value:' + value);
} },
} },
} };
``` ```
## API ## API
@ -109,24 +100,24 @@ export default {
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | Current rate | *number* | - | | v-model | Current rate | _number_ | - |
| count | Count | *number \| string* | `5` | | count | Count | _number \| string_ | `5` |
| size | Icon size| *number \| string* | `20px` | | size | Icon size | _number \| string_ | `20px` |
| gutter | Icon gutter | *number \| string* | `4px` | | gutter | Icon gutter | _number \| string_ | `4px` |
| color | Selected color | *string* | `#ffd21e` | | color | Selected color | _string_ | `#ffd21e` |
| void-color | Void color | *string* | `#c8c9cc` | | void-color | Void color | _string_ | `#c8c9cc` |
| disabled-color | Disabled color | *string* | `#bdbdbd` | | disabled-color | Disabled color | _string_ | `#bdbdbd` |
| icon | Selected icon | *string* | `star` | | icon | Selected icon | _string_ | `star` |
| void-icon | Void icon | *string* | `star-o` | | void-icon | Void icon | _string_ | `star-o` |
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | | icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
| allow-half | Whether to allow half star | *boolean* | `false` | | allow-half | Whether to allow half star | _boolean_ | `false` |
| readonly | Whether to be readonly | *boolean* | `false` | | readonly | Whether to be readonly | _boolean_ | `false` |
| disabled | Whether to disable rate | *boolean* | `false` | | disabled | Whether to disable rate | _boolean_ | `false` |
| touchable `v2.2.0` | Whether to allow select rate by touch gesture | *boolean* | `true` | | touchable `v2.2.0` | Whether to allow select rate by touch gesture | _boolean_ | `true` |
### Events ### Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| | ------ | --------------------------- | ------------ |
| change | Triggered when rate changed | current rate | | change | Triggered when rate changed | current rate |

63
src/rate/README.zh-CN.md
View File

@ -21,20 +21,16 @@ Vue.use(Rate);
export default { export default {
data() { data() {
return { return {
value: 3 value: 3,
};
},
}; };
}
}
``` ```
### 自定义图标 ### 自定义图标
```html ```html
<van-rate <van-rate v-model="value" icon="like" void-icon="like-o" />
v-model="value"
icon="like"
void-icon="like-o"
/>
``` ```
### 自定义样式 ### 自定义样式
@ -52,22 +48,17 @@ export default {
### 半星 ### 半星
```html ```html
<van-rate <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
v-model="value"
allow-half
void-icon="star"
void-color="#eee"
/>
``` ```
```js ```js
export default { export default {
data() { data() {
return { return {
value: 2.5 value: 2.5,
};
},
}; };
}
}
``` ```
### 自定义数量 ### 自定义数量
@ -99,9 +90,9 @@ export default {
method: { method: {
onChange(value) { onChange(value) {
Toast('当前值：' + value); Toast('当前值：' + value);
} },
} },
} };
``` ```
## API ## API
@ -109,24 +100,24 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| v-model | 当前分值 | *number* | - | | v-model | 当前分值 | _number_ | - |
| count | 图标总数 | *number \| string* | `5` | | count | 图标总数 | _number \| string_ | `5` |
| size | 图标大小，默认单位为`px` | *number \| string* | `20px` | | size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
| gutter | 图标间距，默认单位为`px` | *number \| string* | `4px` | | gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
| color | 选中时的颜色 | *string* | `#ffd21e` | | color | 选中时的颜色 | _string_ | `#ffd21e` |
| void-color | 未选中时的颜色 | *string* | `#c8c9cc` | | void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
| disabled-color | 禁用时的颜色 | *string* | `#bdbdbd` | | disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` |
| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `star` | | icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
| void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `star-o` | | void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star-o` |
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
| allow-half | 是否允许半选 | *boolean* | `false` | | allow-half | 是否允许半选 | _boolean_ | `false` |
| readonly | 是否为只读状态 | *boolean* | `false` | | readonly | 是否为只读状态  | _boolean_ | `false` |
| disabled | 是否禁用评分 | *boolean* | `false` | | disabled | 是否禁用评分 | _boolean_ | `false` |
| touchable `v2.2.0` | 是否可以通过滑动手势选择评分 | *boolean* | `true` | | touchable `v2.2.0` | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | ------------------------ | -------- |
| change | 当前分值变化时触发的事件 | 当前分值 | | change | 当前分值变化时触发的事件 | 当前分值 |

72
src/search/README.md
View File

@ -20,9 +20,9 @@ Vue.use(Search);
```js ```js
export default { export default {
data() { data() {
value: '' value: '';
} },
} };
``` ```
### Listen to Events ### Listen to Events
@ -47,7 +47,7 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
value: '' value: '',
}; };
}, },
methods: { methods: {
@ -56,9 +56,9 @@ export default {
}, },
onCancel() { onCancel() {
Toast('Cancel'); Toast('Cancel');
} },
} },
} };
``` ```
> Tips: There will be a search button on the keyboard when Search is inside a form in iOS. > Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
@ -66,21 +66,13 @@ export default {
### Input Align ### Input Align
```html ```html
<van-search <van-search v-model="value" input-align="center" placeholder="Placeholder" />
v-model="value"
input-align="center"
placeholder="Placeholder"
/>
``` ```
### Disabled ### Disabled
```html ```html
<van-search <van-search v-model="value" disabled placeholder="Placeholder" />
v-model="value"
disabled
placeholder="Placeholder"
/>
``` ```
### Custom Background Color ### Custom Background Color
@ -117,38 +109,38 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| | --- | --- | --- | --- |
| label | Left side label | *string* | - | | label | Left side label | _string_ | - |
| shape | Shape of field, can be set to `round` | *string* | `square` | | shape | Shape of field, can be set to `round` | _string_ | `square` |
| background | Background color of field | *string* | `#f2f2f2` | | background | Background color of field | _string_ | `#f2f2f2` |
| maxlength | Max length of value | *number \| string* | - | | maxlength | Max length of value | _number \| string_ | - |
| placeholder | Placeholder | *string* | - | | placeholder | Placeholder | _string_ | - |
| clearable | Whether to be clearable | *boolean* | `true` | | clearable | Whether to be clearable | _boolean_ | `true` |
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
| show-action | Whether to show right action button | *boolean* | `false` | | show-action | Whether to show right action button | _boolean_ | `false` |
| action-text `v2.2.2` | Text of action button | *boolean* | `Cancel` | | action-text `v2.2.2` | Text of action button | _boolean_ | `Cancel` |
| disabled | Whether to disable field | *boolean* | `false` | | disabled | Whether to disable field | _boolean_ | `false` |
| readonly | Whether to be readonly | *boolean* | `false` | | readonly | Whether to be readonly | _boolean_ | `false` |
| error | Whether to show error info | *boolean* | `false` | | error | Whether to show error info | _boolean_ | `false` |
| input-align | Text align of field, can be set to `center` `right` | *string* | `left` | | input-align | Text align of field, can be set to `center` `right` | _string_ | `left` |
| left-icon | Left icon name | *string* | `search` | | left-icon | Left icon name | _string_ | `search` |
| right-icon | Right icon name | *string* | - | | right-icon | Right icon name | _string_ | - |
### Events ### Events
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| | ------ | ---------------------------------- | --------------- |
| search | Triggered when confirm search | *value: string* | | search | Triggered when confirm search | _value: string_ |
| input | Triggered when input value changed | *value: string* | | input | Triggered when input value changed | _value: string_ |
| focus | Triggered when input gets focus | *event: Event* | | focus | Triggered when input gets focus | _event: Event_ |
| blur | Triggered when input loses focus | *event: Event* | | blur | Triggered when input loses focus | _event: Event_ |
| clear | Triggered when click clear icon | *event: Event* | | clear | Triggered when click clear icon | _event: Event_ |
| cancel | Triggered when click cancel button | - | | cancel | Triggered when click cancel button | - |
### Slots ### Slots
| Name | Description | | Name | Description |
|------|------| | ---------- | ----------------------------------------------------------- |
| left | Custom left side content | | left | Custom left side content |
| action | Custom right button, displayed when `show-action` is `true` | | action | Custom right button, displayed when `show-action` is `true` |
| label | Custom Search label | | label | Custom Search label |

60
src/search/README.zh-CN.md
View File

@ -41,7 +41,7 @@ import { Toast } from 'vant';
export default { export default {
data() { data() {
return { return {
value: '' value: '',
}; };
}, },
methods: { methods: {
@ -50,9 +50,9 @@ export default {
}, },
onCancel() { onCancel() {
Toast('取消'); Toast('取消');
} },
} },
} };
``` ```
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 > Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
@ -74,11 +74,7 @@ export default {
通过`disabled`属性禁用搜索框 通过`disabled`属性禁用搜索框
```html ```html
<van-search <van-search v-model="value" disabled placeholder="请输入搜索关键词" />
v-model="value"
disabled
placeholder="请输入搜索关键词"
/>
``` ```
### 自定义背景色 ### 自定义背景色
@ -117,38 +113,38 @@ export default {
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| | --- | --- | --- | --- |
| label | 搜索框左侧文本 | *string* | - | | label | 搜索框左侧文本 | _string_ | - |
| shape | 搜索框形状，可选值为 `round` | *string* | `square` | | shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
| background | 搜索框外部背景色 | *string* | `#f2f2f2` | | background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
| maxlength | 输入的最大字符数 | *number \| string* | - | | maxlength | 输入的最大字符数 | _number \| string_ | - |
| placeholder | 占位提示文字 | *string* | - | | placeholder | 占位提示文字 | _string_ | - |
| clearable | 是否启用清除控件 | *boolean* | `true` | | clearable | 是否启用清除控件 | _boolean_ | `true` |
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
| show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | | show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
| action-text `v2.2.2` | 取消按钮文字 | *boolean* | `取消` | | action-text `v2.2.2` | 取消按钮文字 | _boolean_ | `取消` |
| disabled | 是否禁用输入框 | *boolean* | `false` | | disabled | 是否禁用输入框 | _boolean_ | `false` |
| readonly | 是否将输入框设为只读 | *boolean* | `false` | | readonly | 是否将输入框设为只读 | _boolean_ | `false` |
| error | 是否将输入内容标红 | *boolean* | `false` | | error | 是否将输入内容标红 | _boolean_ | `false` |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` | | input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
| left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | `search` | | left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `search` |
| right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | | right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
|------|------|------| | ------ | -------------------- | ------------------------------ |
| search | 确定搜索时触发 | *value: string (当前输入的值)* | | search | 确定搜索时触发 | _value: string (当前输入的值)_ |
| input | 输入框内容变化时触发 | *value: string (当前输入的值)* | | input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus | 输入框获得焦点时触发 | *event: Event* | | focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | *event: Event* | | blur | 输入框失去焦点时触发 | _event: Event_ |
| clear | 点击清除按钮后触发 | *event: Event* | | clear | 点击清除按钮后触发 | _event: Event_ |
| cancel | 点击取消按钮时触发 | - | | cancel | 点击取消按钮时触发 | - |
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
|------|------| | ---------- | ------------------------------------------------------- |
| left | 自定义左侧内容（搜索框外） | | left | 自定义左侧内容（搜索框外） |
| action | 自定义右侧内容（搜索框外），设置`show-action`属性后展示 | | action | 自定义右侧内容（搜索框外），设置`show-action`属性后展示 |
| label | 自定义左侧文本（搜索框内） | | label | 自定义左侧文本（搜索框内） |

Some files were not shown because too many files have changed in this diff Show More