From 14de879a3b2a697da53a79d43e2173813f02efb8 Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 18 Oct 2017 07:14:25 -0500 Subject: [PATCH] [Doc] add some english documents (#220) * [bugfix] Checkbox border render error in weixin browser * [bugfix] TreeSelect dependency path error * [bugfix] Swipe should clear autoplay timer when destroyed --- docs/examples-docs/en-US/actionsheet.md | 165 +++++++ docs/examples-docs/en-US/address-edit.md | 142 ++++++ docs/examples-docs/en-US/address-list.md | 122 +++++ docs/examples-docs/en-US/area.md | 133 ++++++ docs/examples-docs/en-US/badge.md | 67 +++ docs/examples-docs/en-US/button.md | 89 ++++ docs/examples-docs/en-US/card.md | 75 +++ docs/examples-docs/en-US/cell-swipe.md | 39 ++ docs/examples-docs/en-US/cell.md | 105 +++++ docs/examples-docs/en-US/checkbox.md | 6 +- docs/examples-docs/en-US/contact.md | 237 ++++++++++ docs/examples-docs/en-US/coupon.md | 177 +++++++ docs/examples-docs/en-US/datetime-picker.md | 137 ++++++ docs/examples-docs/en-US/dialog.md | 124 +++++ docs/examples-docs/en-US/field.md | 14 +- docs/examples-docs/en-US/goods-action.md | 80 ++++ docs/examples-docs/en-US/icon.md | 136 ++++++ docs/examples-docs/en-US/image-preview.md | 52 +++ docs/examples-docs/en-US/layout.md | 4 +- docs/examples-docs/en-US/lazyload.md | 122 +++++ docs/examples-docs/en-US/loading.md | 35 ++ docs/examples-docs/en-US/nav-bar.md | 51 +++ docs/examples-docs/en-US/notice-bar.md | 57 +++ docs/examples-docs/en-US/number-keyboard.md | 10 +- docs/examples-docs/en-US/panel.md | 51 +++ docs/examples-docs/en-US/password-input.md | 2 +- docs/examples-docs/en-US/picker.md | 173 +++++++ docs/examples-docs/en-US/popup.md | 136 ++++++ docs/examples-docs/en-US/progress.md | 56 +++ docs/examples-docs/en-US/pull-refresh.md | 93 ++++ docs/examples-docs/en-US/search.md | 101 ++++ docs/examples-docs/en-US/sku.md | 227 +++++++++ docs/examples-docs/en-US/stepper.md | 68 +++ docs/examples-docs/en-US/steps.md | 137 ++++++ docs/examples-docs/en-US/submit-bar.md | 115 +++++ docs/examples-docs/en-US/swipe.md | 80 ++++ docs/examples-docs/en-US/switch-cell.md | 79 ++++ docs/examples-docs/en-US/switch.md | 4 +- docs/examples-docs/en-US/tab.md | 230 ++++++++++ docs/examples-docs/en-US/tabbar.md | 98 ++++ docs/examples-docs/en-US/tag.md | 59 +++ docs/examples-docs/en-US/toast.md | 158 +++++++ docs/examples-docs/en-US/tree-select.md | 168 +++++++ docs/examples-docs/en-US/uploader.md | 57 +++ docs/examples-docs/en-US/waterfall.md | 121 +++++ docs/examples-docs/zh-CN/image-preview.md | 5 + docs/examples-docs/zh-CN/lazyload.md | 5 + docs/src/doc.config.js | 484 +++++++++++++------- 48 files changed, 4710 insertions(+), 176 deletions(-) create mode 100644 docs/examples-docs/en-US/actionsheet.md create mode 100644 docs/examples-docs/en-US/address-edit.md create mode 100644 docs/examples-docs/en-US/address-list.md create mode 100644 docs/examples-docs/en-US/area.md create mode 100644 docs/examples-docs/en-US/badge.md create mode 100644 docs/examples-docs/en-US/button.md create mode 100644 docs/examples-docs/en-US/card.md create mode 100644 docs/examples-docs/en-US/cell-swipe.md create mode 100644 docs/examples-docs/en-US/cell.md create mode 100644 docs/examples-docs/en-US/contact.md create mode 100644 docs/examples-docs/en-US/coupon.md create mode 100644 docs/examples-docs/en-US/datetime-picker.md create mode 100644 docs/examples-docs/en-US/dialog.md create mode 100644 docs/examples-docs/en-US/goods-action.md create mode 100644 docs/examples-docs/en-US/icon.md create mode 100644 docs/examples-docs/en-US/image-preview.md create mode 100644 docs/examples-docs/en-US/lazyload.md create mode 100644 docs/examples-docs/en-US/loading.md create mode 100644 docs/examples-docs/en-US/nav-bar.md create mode 100644 docs/examples-docs/en-US/notice-bar.md create mode 100644 docs/examples-docs/en-US/panel.md create mode 100644 docs/examples-docs/en-US/picker.md create mode 100644 docs/examples-docs/en-US/popup.md create mode 100644 docs/examples-docs/en-US/progress.md create mode 100644 docs/examples-docs/en-US/pull-refresh.md create mode 100644 docs/examples-docs/en-US/search.md create mode 100644 docs/examples-docs/en-US/sku.md create mode 100644 docs/examples-docs/en-US/stepper.md create mode 100644 docs/examples-docs/en-US/steps.md create mode 100644 docs/examples-docs/en-US/submit-bar.md create mode 100644 docs/examples-docs/en-US/swipe.md create mode 100644 docs/examples-docs/en-US/switch-cell.md create mode 100644 docs/examples-docs/en-US/tab.md create mode 100644 docs/examples-docs/en-US/tabbar.md create mode 100644 docs/examples-docs/en-US/tag.md create mode 100644 docs/examples-docs/en-US/toast.md create mode 100644 docs/examples-docs/en-US/tree-select.md create mode 100644 docs/examples-docs/en-US/uploader.md create mode 100644 docs/examples-docs/en-US/waterfall.md diff --git a/docs/examples-docs/en-US/actionsheet.md b/docs/examples-docs/en-US/actionsheet.md new file mode 100644 index 000000000..5e05ae841 --- /dev/null +++ b/docs/examples-docs/en-US/actionsheet.md @@ -0,0 +1,165 @@ + + +## Actionsheet + +### Install +``` javascript +import { Actionsheet } from 'vant'; + +Vue.component(Actionsheet.name, Actionsheet); +``` + +### Usage + +#### Basic Usage + +需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。 + +:::demo Basic Usage +```html +弹出actionsheet + + +``` + +```javascript +export default { + data() { + return { + show1: false, + actions1: [ + { + name: '微信安全支付', + className: 'actionsheet-wx', + callback: this.handleActionClick + }, + { + name: '支付宝支付', + loading: true + }, + { + name: '信用卡支付' + }, + { + name: '其他支付方式' + } + ] + }; + }, + + methods: { + handleActionClick(item) { + console.log(item); + } + } +} +``` +::: + +#### 带取消按钮的 Actionsheet + +如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。 + +:::demo 带取消按钮的 Actionsheet +```html +弹出带取消按钮的actionsheet + + +``` + +```javascript +export default { + data() { + return { + show2: false, + actions1: [ + { + name: '微信安全支付', + className: 'actionsheet-wx', + callback: this.handleActionClick + }, + { + name: '支付宝支付', + loading: true + }, + { + name: '信用卡支付' + }, + { + name: '其他支付方式' + } + ] + }; + } +} +``` +::: + +#### 带标题的 Actionsheet + +如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。 + +:::demo 带标题的 Actionsheet +```html +弹出带标题的actionsheet + +

一些内容

+ +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| actions | 行动按钮数组 | `Array` | `[]` | | +| title | 标题 | `String` | | | +| cancelText | 取消按钮文案 | `String` | | | +| overlay | 是否显示遮罩 | `Boolean` | | | +| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | + +### actions + + +`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： + +| key | Description | +|-----------|-----------| +| name | 标题 | +| subname | 二级标题 | +| className | 为对应列添加特殊的`class` | +| loading | 是否是`loading`状态 | +| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 | diff --git a/docs/examples-docs/en-US/address-edit.md b/docs/examples-docs/en-US/address-edit.md new file mode 100644 index 000000000..b07d00cd4 --- /dev/null +++ b/docs/examples-docs/en-US/address-edit.md @@ -0,0 +1,142 @@ + + +## AddressEdit + +### Install +``` javascript +import { AddressEdit } from 'vant'; + +Vue.component(AddressEdit.name, AddressEdit); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +export default { + data() { + return { + areaList, + searchResult: [] + } + }, + + methods: { + onSave() { + Toast('save'); + }, + onDelete() { + Toast('delete'); + }, + onChangeDetail(val) { + if (val) { + this.searchResult = [{ + name: '黄龙万科中心', + address: '杭州市西湖区' + }]; + } else { + this.searchResult = []; + } + } + } +} +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| areaList | 地区列表 | `Object` | - | - | +| addressInfo | 收货人信息 | `Object` | `{}` | - | +| searchResult | 详细地址搜索结果 | `Array` | `[]` | - | +| addressText | "地址"文案前缀 | `String` | `收货` | - | +| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - | +| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - | +| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - | +| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - | +| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| save | 点击保存按钮时触发 | content：表单内容 | +| delete | 点击删除按钮时触发 | content：表单内容 | +| change-detail | 修改详细地址时触发 | value: 详细地址内容 | + +### Data Structure + +#### addressInfo Data Structure +| key | Description | Type | +|-----------|-----------|-----------| +| id | 每条地址的唯一标识 | `String | Number` | +| name | 收货人姓名 | `String` | +| tel | 收货人手机号 | `String` | +| province | 省份 | `String` | +| city | 城市 | `String` | +| county | 区县 | `String` | +| address_detail | 详细地址 | `String` | +| area_code | 地区编码，通过省市区选择获取 | `String` | +| postal_code | 邮政编码 | `String` | +| is_default | 是否为默认地址 | `String` | + +#### searchResult Data Structure +| key | Description | Type | +|-----------|-----------|-----------| +| name | 地名 | `String` | +| address | 详细地址 | `String` | + +#### 省市县列表Data Structure +请参考 [Area](#/zh-CN/component/area) 组件。 diff --git a/docs/examples-docs/en-US/address-list.md b/docs/examples-docs/en-US/address-list.md new file mode 100644 index 000000000..38eedfe1c --- /dev/null +++ b/docs/examples-docs/en-US/address-list.md @@ -0,0 +1,122 @@ + + +## AddressList + +### Install +``` javascript +import { AddressList } from 'vant'; + +Vue.component(AddressList.name, AddressList); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +export default { + data() { + return { + chosenAddressId: '1', + list: [ + { + id: '1', + name: '张三', + tel: '13000000000', + address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' + }, + { + id: '2', + name: '李四', + tel: '1310000000', + address: '浙江省杭州市拱墅区莫干山路 50 号' + } + ] + } + }, + + methods: { + onAdd() { + Toast('新增收货地址'); + }, + onEdit(item, index) { + Toast('编辑收货地址:' + index); + } + } +} +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前选中地址的 id | String | - | - | +| list | 地址列表 | Array | `[]` | - | +| addButtonText | 底部按钮文字 | String | `新增收货地址` | - | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 | +| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 | + +### Data Structure +#### 地址列表字段说明 +| key | Description | Type | +|-----------|-----------|-----------| +| id | 每条地址的唯一标识 | `String | Number` | +| name | 收货人姓名 | `String` | +| tel | 收货人手机号 | `String` | +| address | 收货地址 | `String` | diff --git a/docs/examples-docs/en-US/area.md b/docs/examples-docs/en-US/area.md new file mode 100644 index 000000000..322c650e1 --- /dev/null +++ b/docs/examples-docs/en-US/area.md @@ -0,0 +1,133 @@ + + +## Area + +### Install + +``` javascript +import { Area } from 'vant'; + +Vue.component(Area.name, Area); +``` + +### Usage + +#### Basic Usage + +要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。 + +:::demo Basic Usage +```html + + + +``` +::: + +#### 选中省市县 + +如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。 + +:::demo 选中省市县 +```html + +``` +::: + +#### 配置显示列 + +可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。 + +:::demo 配置显示列 +```html + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| value | 当前选中的省市区`code` | `String` | - | | +| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | | +| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | | + +### Event + +| Event | Description | 回调参数 | +|-----------|-----------|-----------| +| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 | +| cancel | 点击取消按钮时 | - | + +### Data Structure + +#### 省市县列表Data Structure + +整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。 + +每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。 + +`AreaList`具体格式如下： +```javascript +{ + province_list: { + 110000: '北京市', + 120000: '天津市' + }, + city_list: { + 110100: '北京市', + 110200: '县', + 120100: '天津市', + 120200: '县' + }, + county_list: { + 110101: '东城区', + 110102: '西城区', + 110105: '朝阳区', + 110106: '丰台区' + 120101: '和平区', + 120102: '河东区', + 120103: '河西区', + 120104: '南开区', + 120105: '河北区', + // .... + } +} +``` + +#### 点击完成时返回的Data Structure +返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。 + +`code` 代表被选中的地区编码， `name` 代表被选中的地区名称 +```javascript +[{ + code: '110000', + name: '北京市' +}, { + code: '110100', + name: '北京市' +},{ + code: '110101', + name: '东城区' +}] +``` diff --git a/docs/examples-docs/en-US/badge.md b/docs/examples-docs/en-US/badge.md new file mode 100644 index 000000000..2429ed5c5 --- /dev/null +++ b/docs/examples-docs/en-US/badge.md @@ -0,0 +1,67 @@ + + +## Badge + +### Install +``` javascript +import { Badge } from 'vant'; + +Vue.component(Badge.name, Badge); +``` + +### Usage + +#### Basic Usage +Use `active-key` prop to set index of chosen 'badge' + +:::demo Basic Usage +```html + + + + + + +``` + +``` javascript +export default { + data() { + return { + activeKey: 0 + }; + }, + methods: { + onClick(key) { + this.activeKey = key; + } + } +}; +``` +::: + +### BadgeGroup API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| active-key | Index of chosen badge | `String | Number` | `0` | - | + +### Badge API +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| title | Content | `String` | `''` | - | +| info | Info Message | `String` | `''` | - | +| url | Link | `String` | - | - | diff --git a/docs/examples-docs/en-US/button.md b/docs/examples-docs/en-US/button.md new file mode 100644 index 000000000..c43fc0b50 --- /dev/null +++ b/docs/examples-docs/en-US/button.md @@ -0,0 +1,89 @@ +## Button + +### Install +``` javascript +import { Button } from 'vant'; + +Vue.component(Button.name, Button); +``` + +### Usage + +#### Type + +:::demo Type +```html +Default +Primary +Danger +``` +::: + +#### Size + +:::demo Size +```html +Large +Normal +Small +Mini +``` +::: + +#### Disabled + +:::demo Disabled +```html +Diabled +``` +::: + +#### Loading + +:::demo Loading +```html + + +``` +::: + +#### Custom Tag +Use `tag` prop to custom button tag + +:::demo Custom Tag +```html + + Button + +``` +::: + +#### Action Button + +:::demo Action Button +```html +Text + + + + Text + + + Text + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| type | Type | `String` | `default` | `primary` `danger` | +| size | Size | `String` | `normal` | `large` `small` `mini` | +| tag | Tag | `String` | `button` | - | +| nativeType | Native Type Attribute | `String` | `''` | - | +| diabled | Whether disable button | `Boolean` | `false` | - | +| loading | Whether show loading status | `Boolean` | `false` | - | +| block | Whether to set display block | `Boolean` | `false` | - | +| bottomAction | Whether to be action button | `Boolean` | `false` | - | diff --git a/docs/examples-docs/en-US/card.md b/docs/examples-docs/en-US/card.md new file mode 100644 index 000000000..d16b460fe --- /dev/null +++ b/docs/examples-docs/en-US/card.md @@ -0,0 +1,75 @@ + + +## Card + +### Install +``` javascript +import { Card } from 'vant'; + +Vue.component(Card.name, Card); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` +::: + +#### Advanced Usage +Use `slot` to custom content. + +:::demo Advanced Usage +```html + +
+ Button + Button +
+ +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| thumb | Left thumb | `String` | - | - | +| title | Title | `String` | - | - | +| desc | Description | `String` | - | - | +| num | Number of goods | `String | Number` | - | - | +| price | Price of goods | `String | Number` | - | - | +| centered | Whether content vertical centered | `String` | `false` | - | + +### Slot + +| name | Description | +|-----------|-----------| +| title | Custom title | +| desc | Custom description | +| tags | Custom tags | +| thumb | Custom thumb | +| footer | Custom footer | diff --git a/docs/examples-docs/en-US/cell-swipe.md b/docs/examples-docs/en-US/cell-swipe.md new file mode 100644 index 000000000..c5313a6d2 --- /dev/null +++ b/docs/examples-docs/en-US/cell-swipe.md @@ -0,0 +1,39 @@ +## CellSwipe + +### Install +``` javascript +import { CellSwipe } from 'vant'; + +Vue.component(CellSwipe.name, CellSwipe); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + 选择 + + + + 删除 + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| left-width | 左侧滑动区域宽度 | `Number` | `0` | - | +| right-width | 右侧滑动区域宽度 | `Number` | `0` | - | + +### Slot + +| name | Description | +|-----------|-----------| +| - | 自定义显示内容 | +| left | 左侧滑动内容 | +| right | 右侧滑动内容 | diff --git a/docs/examples-docs/en-US/cell.md b/docs/examples-docs/en-US/cell.md new file mode 100644 index 000000000..9253028a9 --- /dev/null +++ b/docs/examples-docs/en-US/cell.md @@ -0,0 +1,105 @@ + + +## Cell + +### Install +``` javascript +import { Cell, CellGroup } from 'vant'; + +Vue.component(Cell.name, Cell); +Vue.component(CellGroup.name, CellGroup); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + + + +``` +::: + +#### Value only + +:::demo Value only +```html + + + +``` +::: + +#### Left Icon + +:::demo Left Icon +```html + + + +``` +::: + +#### Link + +:::demo Link +```html + + + + +``` +::: + +#### Advanced Usage + +:::demo Advanced Usage +```html + + + + + + + + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| icon | Left Icon | `String` | - | - | +| title | Title | `String` | - | - | +| value | Right text | `String` | - | - | +| label | Description below the title | `String` | - | - | +| url | Link | `String` | - | - | +| isLink | Whether to show link icon | `Boolean` | `false` | - | +| required | Whether to show required mark | `Boolean` | `false` | - | + +### Slot + +| name | Description | +|-----------|-----------| +| - | Default slot | +| icon | Custom icon | +| title | Custom title | +| right-icon | Custom right icon | diff --git a/docs/examples-docs/en-US/checkbox.md b/docs/examples-docs/en-US/checkbox.md index aa4e51439..b8937ed26 100644 --- a/docs/examples-docs/en-US/checkbox.md +++ b/docs/examples-docs/en-US/checkbox.md @@ -116,9 +116,9 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| name | Checkbox name | `Boolean` | `false` | - | -| disabled | Diable checkbox | `Boolean` | `false` | - | -| shape | Checkbox shape | `String` | `round` | `square` | +| name | Checkbox name | `Boolean` | `false` | - | +| disabled | Diable checkbox | `Boolean` | `false` | - | +| shape | Checkbox shape | `String` | `round` | `square` | ### CheckboxGroup API diff --git a/docs/examples-docs/en-US/contact.md b/docs/examples-docs/en-US/contact.md new file mode 100644 index 000000000..5ac30d1df --- /dev/null +++ b/docs/examples-docs/en-US/contact.md @@ -0,0 +1,237 @@ + + +## Contact +通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。 + +### Install +``` javascript +import { ContactCard, ContactList, ContactEdit } from 'vant'; + +Vue.component(ContactCard.name, ContactCard); +Vue.component(ContactList.name, ContactList); +Vue.component(ContactEdit.name, ContactEdit); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + + + + + + + + + + + +``` + +``` javascript +export default { + data() { + return { + chosenContactId: null, + editingContact: {}, + showList: false, + showEdit: false, + isEdit: false, + list: [{ + name: '张三', + tel: '13000000000', + id: 0 + }] + }; + }, + + computed: { + cardType() { + return this.chosenContactId !== null ? 'edit' : 'add'; + }, + + currentContact() { + const id = this.chosenContactId; + return id !== null ? this.list.filter(item => item.id === id)[0] : {}; + } + }, + + methods: { + // 添加联系人 + onAdd() { + this.editingContact = { id: this.list.length }; + this.isEdit = false; + this.showEdit = true; + }, + + // 编辑联系人 + onEdit(item) { + this.isEdit = true; + this.showEdit = true; + this.editingContact = item; + }, + + // 选中联系人 + onSelect() { + this.showList = false; + }, + + // 保存联系人 + onSave(info) { + this.showEdit = false; + this.showList = false; + + if (this.isEdit) { + this.list = this.list.map(item => item.id === info.id ? info : item); + } else { + this.list.push(info); + } + this.chosenContactId = info.id; + }, + + // 删除联系人 + onDelete(info) { + this.showEdit = false; + this.list = this.list.filter(item => item.id !== info.id); + if (this.chosenContactId === info.id) { + this.chosenContactId = null; + } + } + } +}; +``` +::: + +### ContactCard API +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| type | Type，分为添加和编辑两种样式 | `String` | `add` | `edit` | +| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - | +| name | 联系人姓名 | `String` | - | - | +| tel | 联系人手机号 | `String` | - | - | + +### ContactList API +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前选中联系人的 id | `String | Number` | - | - | +| addText | 新建按钮文案 | `String` | `新建联系人` | - | +| list | 联系人列表 | `Array` | `[]` | - | + +### ContactList Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 | +| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 | + + +### ContactEdit API +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| contactInfo | 联系人信息 | `Object` | `[]` | - | +| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - | +| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - | +| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - | + +### ContactEdit Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| save | 点击保存按钮时触发 | content：表单内容 | +| delete | 点击删除按钮时触发 | content：表单内容 | + +### Data Structure + +#### 联系人Data Structure +| key | Description | Type | +|-----------|-----------|-----------| +| id | 每位联系人的唯一标识 | `String | Number` | +| name | 联系人姓名 | `String` | +| tel | 联系人手机号 | `String` | diff --git a/docs/examples-docs/en-US/coupon.md b/docs/examples-docs/en-US/coupon.md new file mode 100644 index 000000000..87658c4fd --- /dev/null +++ b/docs/examples-docs/en-US/coupon.md @@ -0,0 +1,177 @@ + + +## Coupon + +### Install +``` javascript +import { CouponCell, CouponList } from 'vant'; + +Vue.component(CouponCell.name, CouponCell); +Vue.component(CouponList.name, CouponList); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + + + + + + +``` + +```javascript +const coupon = { + available: 1, + discount: 0, + denominations: 150, + origin_condition: 0, + reason: '', + value: 150, + condition: '下单立减 1.50 元', + name: '新手专用优惠券', + start_at: 1489104000, + end_at: 1514592000 +}; + +export default { + data() { + return { + chosenCoupon: -1, + coupons: [coupon], + disabledCoupons: [coupon] + } + }, + + methods: { + onChange(index) { + this.showList = false; + this.chosenCoupon = index; + }, + onExchange(code) { + this.coupons.push(coupon); + } + } +} +``` +::: + +### CouponCell API + +| Attribute | Description | Type | Default | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| title | 单元格标题 | `String` | `优惠` | - | +| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - | +| coupons | 可用优惠券列表 | `Array` | `[]` | - | +| editable | 能否切换优惠券 | `Boolean` | `true` | - | + +### CouponList API + +| Attribute | Description | Type | Default | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - | +| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - | +| coupons | 可用优惠券列表 | `Array` | `[]` | - | +| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - | +| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - | +| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - | +| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - | +| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - | +| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - | +| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - | + +### CouponList Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| change | 优惠券切换回调 | index, 选中优惠券的索引 | +| exchange | 兑换优惠券回调 | code, 兑换码 | + +### Data Structure +#### 优惠券字段说明 +| key | Description | Type | +|-----------|-----------|-----------| +| id | 优惠券 id | `String` | +| name | 优惠券名称 | `String` | +| available | 是否可用, 1:可用,0:不可用 | `Number` | +| discount | 折扣（0为满减券）88=>8.8折 | `Number` | +| denominations | 面值（0为折扣券）单位分 | `Number` | +| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` | +| start_at | 卡有效开始时间 | `Number` | +| end_at | 卡失效日期 | `Number` | +| reason | 不可用原因 | `String` | +| value | 订单优惠金额，单位分 | `Number` | +| condition | 格式化输出 value | `String` | diff --git a/docs/examples-docs/en-US/datetime-picker.md b/docs/examples-docs/en-US/datetime-picker.md new file mode 100644 index 000000000..9564f7a7a --- /dev/null +++ b/docs/examples-docs/en-US/datetime-picker.md @@ -0,0 +1,137 @@ + + +## DatetimePicker + +### Install +``` javascript +import { DatetimePicker } from 'vant'; + +Vue.component(DatetimePicker.name, DatetimePicker); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + +``` + +```javascript +export default { + data() { + return { + minHour: 10, + maxHour: 20, + minDate: new Date(), + maxDate: new Date(2019, 10, 1), + currentDate: new Date(2018, 0, 1) + }; + }, + + methods: { + handlePickerChange(picker) { + console.log(picker); + } + } +}; +``` +::: + +#### 选择日期 + +:::demo 选择日期 +```html + + +``` +::: + +#### 选择时间 + +:::demo 选择时间 +```html + + +``` +::: + + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | +| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' | +| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | | +| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | | +| minHour | 可选的最小小时 | Number | 0 | | +| maxHour | 可选的最大小时 | Number | 23 | | + +### Event + +| Event | Description | 回调参数 | +|-----------|-----------|-----------| +| change | 当值变化时触发的事件 | picker 实例 | +| confirm | 点击完成按钮时触发的事件 | 当前 value | +| cancel | 点击取消按钮时触发的事件 | - | + +### change事件 + +在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： + +| 函数 | Description | +|-----------|-----------| +| getColumnValue(index) | 获取对应列中选中的值 | +| setColumnValue(index, value) | 设置对应列中选中的值 | +| getColumnValues(index) | 获取对应列中所有的备选值 | +| setColumnValues(index, values) | 设置对应列中所有的备选值 | +| getValues() | 获取所有列中被选中的值，返回一个数组 | +| setValues(values) | `values`为一个数组，设置所有列中被选中的值 | diff --git a/docs/examples-docs/en-US/dialog.md b/docs/examples-docs/en-US/dialog.md new file mode 100644 index 000000000..fc4bdb2c7 --- /dev/null +++ b/docs/examples-docs/en-US/dialog.md @@ -0,0 +1,124 @@ + + +## Dialog + +### Install + +```js +import { Dialog } from 'vant'; +``` + +### Usage + +#### 消息提示 + +用于提示一些消息，只包含一个确认按钮 + +:::demo 消息提示 +```html +Alert +无标题 Alert +``` + +```javascript +export default { + methods: { + onClickAlert() { + Dialog.alert({ + title: '标题', + message: '弹窗内容' + }).then(() => { + // on close + }); + }, + + onClickAlert2() { + Dialog.alert({ + message: '弹窗内容' + }).then(() => { + // on close + }); + } + } +}; +``` +::: + +#### 消息确认 + +用于确认消息，包含取消和确认按钮 + +:::demo 消息确认 +```html +Confirm +``` + +```javascript +export default { + methods: { + onClickConfirm() { + Dialog.confirm({ + title: '标题', + message: '弹窗内容' + }).then(() => { + // on confirm + }).catch(() => { + // on cancel + }); + } + } +}; +``` +::: + +### 方法 + +| 方法名 | Attribute | 返回值 | 介绍 | +|-----------|-----------|-----------|-------------| +| Dialog.alert | options | `Promise` | 展示消息提示弹窗 | +| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 | +| Dialog.close | - | `void` | 关闭弹窗 | + +### Options + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| title | 标题 | `String` | | | +| message | 内容 | `String` | | | +| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | +| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | +| confirmButtonText | 确认按钮的文案 | `String` | `确认` | | +| cancelButtonText | 取消按钮的文案 | `String` | `取消` | | +| overlay | 是否展示蒙层 | `Boolean` | `true` | | +| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | +| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | | diff --git a/docs/examples-docs/en-US/field.md b/docs/examples-docs/en-US/field.md index b00e7f3f8..12be8de48 100644 --- a/docs/examples-docs/en-US/field.md +++ b/docs/examples-docs/en-US/field.md @@ -103,13 +103,13 @@ Textarea Filed can be auto resize when has `autosize` prop | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| type | Filed type | `String` | `text` | `number` `email`
`textarea` `tel`
`datetime` `date`
`password` `url` | -| value | Filed value | `String` | - | - | -| label | Filed label | `String` | - | - | -| disabled | Disable field | `Boolean` | `false` | - | -| error | Whether to show error info | `Boolean` | `false` | - | -| autosize | Textarea auto resize | `Boolean` | `false` | - | -| icon | Right side Icon name | `String` | - | - | +| type | Filed type | `String` | `text` | `number` `email`
`textarea` `tel`
`datetime` `date`
`password` `url` | +| value | Filed value | `String` | - | - | +| label | Filed label | `String` | - | - | +| disabled | Disable field | `Boolean` | `false` | - | +| error | Whether to show error info | `Boolean` | `false` | - | +| autosize | Textarea auto resize | `Boolean` | `false` | - | +| icon | Right side Icon name | `String` | - | - | ### Event diff --git a/docs/examples-docs/en-US/goods-action.md b/docs/examples-docs/en-US/goods-action.md new file mode 100644 index 000000000..bd62aa344 --- /dev/null +++ b/docs/examples-docs/en-US/goods-action.md @@ -0,0 +1,80 @@ + + +## GoodsAction + +### Install +``` javascript +import { + GoodsAction, + GoodsActionBigBtn, + GoodsActionMiniBtn +} from 'vant'; + +Vue.component(GoodsAction.name, GoodsAction); +Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn); +Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn); +``` + +### Usage + +:::demo +```html + + + 客服 + + + 购物车 + + + 加入购物车 + + + 立即购买 + + +``` + +```javascript +export default { + methods: { + onClickMiniBtn() { + Toast('点击图标'); + }, + onClickBigBtn() { + Toast('点击按钮'); + } + } +} +``` +::: + +### API + +#### GoodsActionMiniBtn + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| icon | 图标 | `String` | - | Icon 组件支持的所有图标 | +| iconClass | 图标额外类名 | `String` | `''` | - | +| url | 跳转链接 | `String` | `javascript:;` | - | + +#### GoodsActionBigBtn + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| url | 跳转链接 | `String` | `javascript:;` | - | +| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - | diff --git a/docs/examples-docs/en-US/icon.md b/docs/examples-docs/en-US/icon.md new file mode 100644 index 000000000..14a480ad3 --- /dev/null +++ b/docs/examples-docs/en-US/icon.md @@ -0,0 +1,136 @@ + + +## Icon + +### Install +``` javascript +import { Icon } from 'vant'; + +Vue.component(Icon.name, Icon); +``` + +### Usage + +#### Basic Usage +View all usable icons on the right. + +:::demo Icon List +```html + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| name | Icon name | `String` | `''` | - | diff --git a/docs/examples-docs/en-US/image-preview.md b/docs/examples-docs/en-US/image-preview.md new file mode 100644 index 000000000..ebebcd7ed --- /dev/null +++ b/docs/examples-docs/en-US/image-preview.md @@ -0,0 +1,52 @@ + + +## ImagePreview + +### Install + +```js +import { ImagePreview } from 'vant'; +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html +Show +``` + +```javascript +export default { + methods: { + showImagePreview() { + ImagePreview([ + 'https://img.yzcdn.cn/1.jpg', + 'https://img.yzcdn.cn/2.jpg' + ]); + } + } +}; +``` +::: + +### 方法参数 + +| Attribute | Description | Type | +|-----------|-----------|-----------| +| imageUrls | Image URL list | `Array` | diff --git a/docs/examples-docs/en-US/layout.md b/docs/examples-docs/en-US/layout.md index 60608f88f..5095cb847 100644 --- a/docs/examples-docs/en-US/layout.md +++ b/docs/examples-docs/en-US/layout.md @@ -62,5 +62,5 @@ Set grid spacing using `gutter` attribute. The default value is 0 | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | span | number of column the grid spans | `String | Number` | - | - | -| offset | number of spacing on the left side of the grid | `String | Number` | - | - | -| prefix | className prefix | `String` | `van` | - | +| offset | number of spacing on the left side of the grid | `String | Number` | - | - | +| prefix | className prefix | `String` | `van` | - | diff --git a/docs/examples-docs/en-US/lazyload.md b/docs/examples-docs/en-US/lazyload.md new file mode 100644 index 000000000..f9bc2a2df --- /dev/null +++ b/docs/examples-docs/en-US/lazyload.md @@ -0,0 +1,122 @@ + + +## Lazyload + +### Install + +```js +import Vue from 'vue'; +import { Lazyload } from 'vant'; + +Vue.use(Lazyload, options); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +export default { + data() { + return { + imageList: [ + 'https://img.yzcdn.cn/1.jpg', + 'https://img.yzcdn.cn/2.jpg' + ] + }; + } +} +``` +::: + +#### Background Image +Use `v-lazy:background-image` to set background url, and declare the height of the container. + +:::demo Background Image +```html +
+``` + +```javascript +export default { + data() { + return { + backgroundImageList: [ + 'https://img.yzcdn.cn/1.jpg', + 'https://img.yzcdn.cn/2.jpg' + ] + }; + } +} +``` +::: + +#### Lazyload Component + +:::demo Lazyload Component +```html + + + +``` + +```javascript +export default { + data() { + return { + componentImageList: [ + 'https://img.yzcdn.cn/1.jpg', + 'https://img.yzcdn.cn/2.jpg' + ] + }; + } +} +``` +::: + +### Options + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| loading | Src of the image while loading | `String` | - | - | +| error | Src of the image upon load fail | `String` | - | - | +| preload | Proportion of pre-loading height | `String` | - | - | +| attempt | Attempts count | `Number` | `3` | | +| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - | +| adapter | Dynamically modify the attribute of element | `Object` | - | - | +| filter | The image's listener filter | `Object` | - | - | +| lazyComponent | Lazyload component | `Boolean` | `false` | - | + +See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload) diff --git a/docs/examples-docs/en-US/loading.md b/docs/examples-docs/en-US/loading.md new file mode 100644 index 000000000..dbc2f2382 --- /dev/null +++ b/docs/examples-docs/en-US/loading.md @@ -0,0 +1,35 @@ +## Loading + +### Install +``` javascript +import { Loading } from 'vant'; + +Vue.component(Loading.name, Loading); +``` + +### Usage + +#### Solid color + +:::demo Solid color +```html + + +``` +::: + +#### Gradient color + +:::demo Gradient color +```html + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| color | Color | `String` | `black` | `black` `white` | +| type | Type | `String` | `gradient-circle` | `gradient-circle` `circle` | diff --git a/docs/examples-docs/en-US/nav-bar.md b/docs/examples-docs/en-US/nav-bar.md new file mode 100644 index 000000000..753fddb55 --- /dev/null +++ b/docs/examples-docs/en-US/nav-bar.md @@ -0,0 +1,51 @@ +## NavBar + +### Install +``` javascript +import { NavBar } from 'vant'; + +Vue.component(NavBar.name, NavBar); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` +::: + +#### Advanced Usage + +:::demo Advanced Usage +```html + + + +``` +::: + + +### API +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| title | Title | `String` | `''` | - | +| left-text | Left Text | `String` | `''` | - | +| right-text | Right Text | `String` | `''` | - | +| left-arrow | Whether to show left arrow | `Boolean` | `false` | - | +| fixed | Whether to fixed top | `Boolean` | `false` | - | + +### Slot + +| name | Description | +|-----------|-----------| +| title | Custom title | +| left | Custom left side content | +| right | Custom right side content | \ No newline at end of file diff --git a/docs/examples-docs/en-US/notice-bar.md b/docs/examples-docs/en-US/notice-bar.md new file mode 100644 index 000000000..5b8d9fc69 --- /dev/null +++ b/docs/examples-docs/en-US/notice-bar.md @@ -0,0 +1,57 @@ +## NoticeBar + +### Install +``` javascript +import { NoticeBar } from 'vant'; + +Vue.component(NoticeBar.name, NoticeBar); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` +::: + +#### Disable scroll + +:::demo Disable scroll +```html + + Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily. + +``` +::: + +#### Mode + +:::demo Mode +```html + + Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily. + + + + Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily. + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| mode | Mode | String | `''` | `closeable` `link` | +| delay | Animation delay (s) | Number | `1` | - | +| speed | Scroll speed (px) | Number | `40` | - | +| scrollable | Whether to scroll content | Boolean | `true` | - | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| click | Triggered when click notice bar | - | diff --git a/docs/examples-docs/en-US/number-keyboard.md b/docs/examples-docs/en-US/number-keyboard.md index a8eec6e62..b718f2807 100644 --- a/docs/examples-docs/en-US/number-keyboard.md +++ b/docs/examples-docs/en-US/number-keyboard.md @@ -75,12 +75,12 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| show | Whether to show keyboard | `Boolean` | - | - | +| show | Whether to show keyboard | `Boolean` | - | - | | title | Keyboard title | `String` | - | - | -| extraKey | Content of bottom left key | `String` | `''` | - | -| zIndex | Keyboard z-index | `Number` | `100` | - | -| transition | Whether to show transition animation | `Boolean` | `true` | - | -| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - | +| extraKey | Content of bottom left key | `String` | `''` | - | +| zIndex | Keyboard z-index | `Number` | `100` | - | +| transition | Whether to show transition animation | `Boolean` | `true` | - | +| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - | ### Event diff --git a/docs/examples-docs/en-US/panel.md b/docs/examples-docs/en-US/panel.md new file mode 100644 index 000000000..7bd4b1e0b --- /dev/null +++ b/docs/examples-docs/en-US/panel.md @@ -0,0 +1,51 @@ +## Panel + +### Install +``` javascript +import { Panel } from 'vant'; + +Vue.component(Panel.name, Panel); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +
Panel Content
+ +``` +::: + +#### Advanced Usage + +:::demo Advanced Usage +```html + +
Panel Content
+
+ Button + Button +
+ +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| title | Title | `String` | - | - | +| desc | Description | `String` | - | - | +| status | Status | `String` | - | - | + + +### Slot + +| name | Description | +|-----------|-----------| +| - | Default slot | +| header | Custom header | +| footer | Custom footer | diff --git a/docs/examples-docs/en-US/password-input.md b/docs/examples-docs/en-US/password-input.md index af90f5a41..3671faf64 100644 --- a/docs/examples-docs/en-US/password-input.md +++ b/docs/examples-docs/en-US/password-input.md @@ -76,7 +76,7 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| value | Password value | `String` | `''` | - | +| value | Password value | `String` | `''` | - | | length | Maxlength of password | `Number` | `6` | - | | info | Bottom info | `String` | - | - | | errorInfo | Bottom error info | `String` | - | - | diff --git a/docs/examples-docs/en-US/picker.md b/docs/examples-docs/en-US/picker.md new file mode 100644 index 000000000..a821ab06a --- /dev/null +++ b/docs/examples-docs/en-US/picker.md @@ -0,0 +1,173 @@ + + +## Picker + +### Install +``` javascript +import { Picker } from 'vant'; + +Vue.component(Picker.name, Picker); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +const citys = { + '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'], + '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'], + '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'] +}; + +export default { + data() { + return { + pickerColumns: [ + { + values: Object.keys(citys), + className: 'column1' + }, + { + values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'], + className: 'column2' + } + ] + }; + }, + + methods: { + handlePickerChange(picker, values) { + picker.setColumnValues(1, citys[values[0]]); + } + } +}; +``` +::: + +#### 带toolbar的Picker + +:::demo 带toolbar的Picker +```html + +``` + +```javascript +const citys = { + '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'], + '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'], + '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'] +}; + +export default { + data() { + return { + title: '地区选择', + pickerColumns: [ + { + values: Object.keys(citys), + className: 'column1' + }, + { + values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'], + className: 'column2' + } + ] + }; + }, + + methods: { + handlePickerChange(picker, values) { + picker.setColumnValues(1, citys[values[0]]); + }, + handlePickerCancel() { + alert('picker cancel'); + }, + handlePickerConfirm() { + alert('picker confirm'); + } + } +}; +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | | +| itemHeight | 选中元素区高度 | `Number` | `44` | | +| columns | 对象数组，配置每一列显示的数据 | `Array` | | | +| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | | +| title | 在toolbar上显示的标题文字 | `String` | | | + +### columns + +`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： + +| key | Description | +|-----------|-----------| +| values | 列中对应的备选值 | +| defaultIndex | 初始选中值的索引，默认为0 | +| className | 为对应列添加特殊的`class` | + +### change事件 + +在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： + +| 函数 | Description | +|-----------|-----------| +| getColumnValue(index) | 获取对应列中选中的值 | +| setColumnValue(index, value) | 设置对应列中选中的值 | +| getColumnValues(index) | 获取对应列中所有的备选值 | +| setColumnValues(index, values) | 设置对应列中所有的备选值 | +| getValues() | 获取所有列中被选中的值，返回一个数组 | +| setValues(values) | `values`为一个数组，设置所有列中被选中的值 | diff --git a/docs/examples-docs/en-US/popup.md b/docs/examples-docs/en-US/popup.md new file mode 100644 index 000000000..ce6764582 --- /dev/null +++ b/docs/examples-docs/en-US/popup.md @@ -0,0 +1,136 @@ + + +## Popup + +### Install +``` javascript +import { Popup } from 'vant'; + +Vue.component(Popup.name, Popup); +``` + +### Usage + +#### Basic Usage + +`popup`默认情况下是从中间弹出。 + +:::demo Basic Usage +```html +从中间弹出popup + + 从中间弹出popup + +``` + +```javascript +export default { + data() { + return { + popupShow1: false + } + } +}; +``` +::: + +#### 从不同位置弹出层 + +可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。 + +:::demo 从不同位置弹出层 +```html +从下方弹出popup + + 弹出dialog + + +从上方弹出popup + + 更新成功 + + +从右方弹出popup + + 关闭 popup + + + +从左方弹出popup + + 关闭 popup + +``` + +```javascript +export default { + data() { + return { + popupShow1: false, + popupShow2: false, + popupShow3: false, + popupShow4: false + } + }, + + watch: { + popupShow2(val) { + if (val) { + setTimeout(() => { + this.popupShow2 = false; + }, 2000); + } + } + } +}; +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前组件是否显示 | `Boolean` | `false` | - | +| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - | +| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - | +| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` | +| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - | +| transition | 弹出层的`transition` | `String` | `popup-slide` | | +| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - | diff --git a/docs/examples-docs/en-US/progress.md b/docs/examples-docs/en-US/progress.md new file mode 100644 index 000000000..dbd3b1f28 --- /dev/null +++ b/docs/examples-docs/en-US/progress.md @@ -0,0 +1,56 @@ +## Progress + +### Install +``` javascript +import { Progress } from 'vant'; + +Vue.component(Progress.name, Progress); +``` + +### Usage + +#### Basic Usage + +进度条默认为蓝色，使用`percentage`属性来设置当前进度 + +:::demo Basic Usage +```html + + + +``` +::: + + +#### 进度条置灰 + +:::demo 进度条置灰 +```html + + + +``` +::: + + +#### 样式定制 + +可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 + +:::demo 样式定制 +```html + + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| inactive | 是否置灰 | `Boolean` | `false` | | +| percentage | 进度百分比 | `Number` | `false` | `0-100` | +| pivotText | 文字显示 | `String` | 百分比文字 | - | +| color | 进度条颜色 | `String` | `#38f` | hexvalue | +| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue | diff --git a/docs/examples-docs/en-US/pull-refresh.md b/docs/examples-docs/en-US/pull-refresh.md new file mode 100644 index 000000000..4256162bd --- /dev/null +++ b/docs/examples-docs/en-US/pull-refresh.md @@ -0,0 +1,93 @@ + + +## PullRefresh + +### Install +``` javascript +import { PullRefresh } from 'vant'; + +Vue.component(PullRefresh.name, PullRefresh); +``` + +### Usage + +:::demo +```html + + +

刷新次数: {{ count }}

+ +``` + +```javascript +export default { + data() { + return { + count: 0, + isLoading: false + } + }, + + watch: { + isLoading() { + if (this.isLoading) { + setTimeout(() => { + Toast('刷新成功'); + this.isLoading = false; + this.count++; + }, 500); + } + } + } +} +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 是否在加载中 | `Boolean` | - | - | +| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - | +| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - | +| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - | +| animationDuration | 动画时长 | `Number` | `300` | - | +| headHeight | 顶部内容高度 | `Number` | `50` | - | + +### Slot + +| name | Description | +|-----------|-----------| +| - | 自定义内容 | +| normal | 非下拉状态时顶部内容 | +| pulling | 下拉过程中顶部内容 | +| loosing | 释放过程中顶部内容 | +| loading | 加载过程中顶部内容 | diff --git a/docs/examples-docs/en-US/search.md b/docs/examples-docs/en-US/search.md new file mode 100644 index 000000000..2f8635192 --- /dev/null +++ b/docs/examples-docs/en-US/search.md @@ -0,0 +1,101 @@ + + +## Search + +### Install +``` javascript +import { Search } from 'vant'; + +Vue.component(Search.name, Search); +``` + +### Usage + +#### Basic Usage + +`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 + +:::demo Basic Usage +```html + +``` +::: + +#### 监听对应事件 + +`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 + +Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮 + +:::demo 监听对应事件 +```html +
+ +
+``` +::: + +#### 自定义行动按钮 + +`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。 + +:::demo 自定义行动按钮 +```html + + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| placeholder | `input`的`placeholder`文案 | `String` | | | +| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | +| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| cancel | 取消搜索 | - | +| search | 确定搜索 | - | + +### Slot + +| name | Description | +|-----------|-----------| +| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 | diff --git a/docs/examples-docs/en-US/sku.md b/docs/examples-docs/en-US/sku.md new file mode 100644 index 000000000..c50044ad9 --- /dev/null +++ b/docs/examples-docs/en-US/sku.md @@ -0,0 +1,227 @@ +## Sku + + + +### Install +```javascript +import { Sku } from 'vant'; + +Vue.component(Sku.name, Sku); +``` + +### Usage +#### Basic Usage +:::demo +```html + +``` +::: + +#### 自定义sku slot区块 +:::demo +```html + +``` +::: + +### API + +| Attribute | Description | Type | Default | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 是否显示sku | Boolean | false | 是 | +| sku | 商品sku数据 | Object | - | 是 | +| goods | 商品信息 | Object | - | 是 | +| goodsId | 商品id | String/Number | - | 是 | +| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 | +| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 | +| quota | 限购数(0表示不限购) | Number | 0 | 否 | +| quotaUsed | 已经购买过的数量 | Number | 0 | 否 | +| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 | +| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 | +| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 | +| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 | +| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 | + +### slots +sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表： + +| 名称 | Description | +|-----------|-----------| +| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 | +| sku-group | 商品sku展示区 | +| extra-sku-group | 额外商品sku展示区，一般用不到 | +| sku-stepper | 商品数量选择区 | +| sku-messages | 商品留言区 | +| sku-actions | 操作按钮区 | + +#### Data Structure +#### sku对象结构 +```javascript +"sku": { + // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。 + // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。 + "tree": [{ + "k": "颜色", // skuKeyName：规格类目名称 + "v": [{ + "id": "30349", // skuValueId：规格值id + "name": "红色", // skuValueName：规格值名称 + "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片 + }, { + "id": "1215", + "name": "蓝色", + "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg" + }], + "k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id + }, ...], + // 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合 + "list": [{ + "id": 2259, // skuId，下单时后端需要 + "price": 100, // 价格（单位分） + "s1": "1215", // 规格类目k_s为s1的对应规格值id + "s2": "1193", // 规格类目k_s为s2的对应规格值id + "s3": "0", // 最多包含3个规格值，为0表示不存在该规格 + "stock_num": 110 // 当前sku组合对应的库存 + }, ...], + "price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一 + "stock_num": 227, // 商品总库存 + "collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id + "none_sku": false, // 是否无规格商品 + "messages": [{ // 商品留言 + "datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含 + "multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行 + "name": "留言", // 留言名称 + "type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email + "required": "1" // 是否必填 “1”表示必填 + }, ...], + "hide_stock": false // 是否隐藏剩余库存 +}, +``` + +#### goods对象结构 +```javascript +"goods": { + // 商品标题 + "title": "测试商品", + // 默认商品sku缩略图 + "picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp" +}, +``` + +#### 添加购物车和点击购买回调函数接收的skuData对象结构 +```javascript +skuData: { + // 商品id + goodsId:"946755", + // 留言信息 + messages: { + message_0:"12", + message_1:"", + ... // 有几个留言就有几条 + }, + // 另一种格式的留言，key不同 + cartMessages: { + '留言1': 'xxxx', + ... // key是message的name + }, + // 选择的商品数量 + selectedNum:1, + // 选择的sku组合 + selectedSkuComb: { + id:2257, + price:100, + s1:"30349", + s2:"1193", + s3:"0", + stock_num:111 + } +} +``` diff --git a/docs/examples-docs/en-US/stepper.md b/docs/examples-docs/en-US/stepper.md new file mode 100644 index 000000000..19df9b89d --- /dev/null +++ b/docs/examples-docs/en-US/stepper.md @@ -0,0 +1,68 @@ + + +## Stepper + +### Install +``` javascript +import { Stepper } from 'vant'; + +Vue.component(Stepper.name, Stepper); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +

当前值：{{ stepper1 }}

+``` +::: + +#### Disabled +通过设置`disabled`属性来禁用 stepper + +:::demo 禁用状态 +```html + +``` +::: + +#### Advanced Usage + +默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性 + +:::demo Advanced Usage +```html + +

当前值：{{ stepper2 || 9 }}

+``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| min | 最小值 | `String | Number` | `1` | - | +| max | 最大值 | `String | Number` | - | - | +| defaultValue | Default | `String | Number` | `1` | - | +| step | 步数 | `String | Number` | `1` | - | +| disabled | 是否禁用 | `Boolean` | `false` | - | +| disableInput | 是否禁用input框 | `Boolean` | `false` | - | + +### Event + +| Event | Description | 回调参数 | +|-----------|-----------|-----------| +| change | 当绑定值变化时触发的事件 | 当前组件的值 | +| overlimit | 点击不可用的按钮时触发 | - | diff --git a/docs/examples-docs/en-US/steps.md b/docs/examples-docs/en-US/steps.md new file mode 100644 index 000000000..172fb68e2 --- /dev/null +++ b/docs/examples-docs/en-US/steps.md @@ -0,0 +1,137 @@ + + +## Steps + +### Install +``` javascript +import { Step, Steps } from 'vant'; + +Vue.component(Step.name, Step); +Vue.component(Steps.name, Steps); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + 买家下单 + 商家接单 + 买家提货 + 交易完成 + + +下一步 +``` + +```javascript +export default { + data() { + return { + active: 0 + }; + }, + + methods: { + nextStep() { + this.active = ++this.active % 4; + } + } +} +``` +::: + +#### 物流描述 + +通过`title`和`description`属性来定义物流描述信息 + +:::demo 物流描述 +```html + + 买家下单 + 商家接单 + 买家提货 + 交易完成 + +``` +::: + +#### 竖向步骤条 + +可以通过设置`direction`属性来改变步骤条的显示方式 + +:::demo 竖向步骤条 +```html + + +

【城市】物流状态1

+

2016-07-12 12:40

+ + +

【城市】物流状态2

+

2016-07-11 10:00

+ + +

快件已发货

+

2016-07-10 09:30

+ + +``` +::: + +### #### Advanced Usage +使用`slot`增加自定义内容 + +:::demo Advanced Usage +```html + + +

物流进度

+ 买家下单 + 商家接单 + 买家提货 + 交易完成 + +``` +::: + +### Steps API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| active | 当前步骤，起始值为0 | `Number` | | | +| icon | 当前步骤的icon | `String` | | | +| iconClass | 当前步骤栏为icon添加的类 | `String` | | | +| title | 当前步骤从标题 | `String` | | | +| description | 当前步骤描述 | `String` | | | +| direction | 显示方向 | `String` | `horizontal` | `vertical` | +| activeColor | active状态颜色 | `String` | `#06bf04` | | + +### Steps Slot + +| 名称 | Description | +|-----------|-----------| +| icon | 自定义icon区域 | +| message-extra | 状态栏添加额外的元素 | diff --git a/docs/examples-docs/en-US/submit-bar.md b/docs/examples-docs/en-US/submit-bar.md new file mode 100644 index 000000000..4a4acd884 --- /dev/null +++ b/docs/examples-docs/en-US/submit-bar.md @@ -0,0 +1,115 @@ +## SubmitBar + + + + + +### Install +``` javascript +import { SubmitBar } from 'vant'; + +Vue.component(SubmitBar.name, SubmitBar); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` +::: + +#### Disabled +禁用状态下不会触发`submit`事件 + +:::demo 禁用状态 +```html + +``` +::: + +#### Loading +加载状态下不会触发`submit`事件 +:::demo 加载状态 +```html + +``` +::: + +#### +提示文案中的额外操作和说明 +:::demo 提示文案中添加操作 +```html + + + 您的收货地址不支持同城送, 修改地址 > + + +``` +::: + +### API + +| Attribute | Description | Type | Default | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| price | 价格（单位分） | `Number` | | 是 | +| button-text | 按钮文字 | `String` | | 是 | +| button-type | 按钮类型 | `String` | `danger` | 否 | +| tip | 提示文案 | `String` | | 否 | +| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 | +| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| submit | 按钮点击事件回调 | - | + +### Slot + +| 名称 | Description | +|-----------|-----------| +| tip | 提示文案中的额外操作和说明 | diff --git a/docs/examples-docs/en-US/swipe.md b/docs/examples-docs/en-US/swipe.md new file mode 100644 index 000000000..5f80e6ef7 --- /dev/null +++ b/docs/examples-docs/en-US/swipe.md @@ -0,0 +1,80 @@ + + +## Swipe + +### Install +``` javascript +import { Swipe, SwipeItem } from 'vant'; + +Vue.component(Swipe.name, Swipe); +Vue.component(SwipeItem.name, SwipeItem); +``` + +### Usage + +#### Basic Usage +通过`autoplay`属性设置自动轮播间隔 + +:::demo Basic Usage +```html + + 1 + 2 + 3 + 4 + +``` +::: + +#### 图片懒加载 +配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载 + +:::demo 图片懒加载 +```html + + + + + +``` + +```javascript +export default { + data() { + return { + images: [ + 'https://img.yzcdn.cn/1.jpg', + 'https://img.yzcdn.cn/2.jpg' + ] + } + } +} +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - | +| duration | 动画时长，单位为 ms | `Number` | `500` | - | +| showIndicators | 是否显示指示器 | `Boolean` | `true` | - | + +### 事件 + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| change | 每一页轮播结束后触发 | index, 当前页的索引 | diff --git a/docs/examples-docs/en-US/switch-cell.md b/docs/examples-docs/en-US/switch-cell.md new file mode 100644 index 000000000..46c06d361 --- /dev/null +++ b/docs/examples-docs/en-US/switch-cell.md @@ -0,0 +1,79 @@ +## SwitchCell + +`SwitchCell`组件是对`Switch`和`Cell`组件的封装 + + + +### Install +``` javascript +import { SwitchCell } from 'vant'; + +Vue.component(SwitchCell.name, SwitchCell); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + + +``` + +```javascript +export default { + data() { + return { + checked: true + } + } +} +``` +::: + +#### Disabled +通过`disabled`属性可以将组件设置为禁用状态 + +:::demo 禁用状态 +```html + + + +``` +::: + +#### Loading +通过`loading`属性可以将组件设置为加载状态 + +:::demo 加载状态 +```html + + + +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 开关状态 | `Boolean` | | | +| title | 左侧标题 | `String` | `''` | | +| loading | 是否为加载状态 | `Boolean` | `false` | | +| disabled | 是否为禁用状态 | `Boolean` | `false` | | + +### Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| change | 开关状态切换回调 | checked: 是否选中开关 | \ No newline at end of file diff --git a/docs/examples-docs/en-US/switch.md b/docs/examples-docs/en-US/switch.md index b42062673..6868d48fd 100644 --- a/docs/examples-docs/en-US/switch.md +++ b/docs/examples-docs/en-US/switch.md @@ -102,8 +102,8 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| | v-model | Check status of Switch | `Boolean` | `false` | - | -| loading | Whether to show loading icon | `Boolean` | `false` | - | -| disabled | Disable switch | `Boolean` | `false` | - | +| loading | Whether to show loading icon | `Boolean` | `false` | - | +| disabled | Disable switch | `Boolean` | `false` | - | ### Event diff --git a/docs/examples-docs/en-US/tab.md b/docs/examples-docs/en-US/tab.md new file mode 100644 index 000000000..1cd92a810 --- /dev/null +++ b/docs/examples-docs/en-US/tab.md @@ -0,0 +1,230 @@ + + +## Tab + +### Install +``` javascript +import { Tab, Tabs } from 'vant'; + +Vue.component(Tab.name, Tab); +Vue.component(Tabs.name, Tabs); +``` + +### Usage + +#### Basic Usage + +默认情况下是启用第一个`tab`。 + +:::demo Basic Usage +```html + + 内容一 + 内容二 + 内容三 + 内容四 + +``` +::: + +#### active特定tab + +可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。 + +:::demo Basic Usage +```html + + 内容一 + 内容二 + 内容三 + 内容四 + +``` +::: + +#### 设置切换tab的动画时间 + +通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。 + +:::demo 设置切换tab的动画时间 +```html + + 内容一 + 内容二 + 内容三 + +``` +::: + +#### 横向滚动tab + +默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。 + +:::demo 横向滚动tab +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + 内容六 + 内容七 + 内容八 + +``` +::: + +#### 禁用tab + +在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 + +:::demo 禁用tab +```html + + 内容一 + 内容二 + 内容三 + 内容四 + +``` + +```javascript +export default { + methods: { + popalert() { + alert('haha') + } + } +}; +``` +::: + +#### card样式 + +`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。 + +:::demo card样式 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + +``` +::: + + +#### 自定义样式 + +可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。 + +:::demo 自定义样式 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + + + +``` +::: + +#### click事件 + +可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。 + +:::demo click事件 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + +``` + +```javascript +export default { + methods: { + handleTabClick(index) { + alert(index); + } + } +}; +``` +::: + +### van-tabs API + +| Attribute | Description | Type | Default | 可选 | +|-----------|-----------|-----------|-------------|-------------| +| classtype | 两种UI | `String` | `line` | `line`, `card` | +| active | 默认激活的tab | `String`, `Number` | `0` | | +| navclass | tabs的内部nav上的自定义classname | `String` | | | +| duration | 切换tab的动画时间 | `Number` | `0.3` | | | + + +### van-tab API + +| Attribute | Description | Type | Default | 可选 | +|-----------|-----------|-----------|-------------|-------------| +| title | tab的标题 | `String` | | | +| disabled | 是否禁用这个tab | `Boolean` | `false` | | + +### van-tabs Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| click | 某个tab点击事件 | index：点击的`tab`的索引 | +| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 | + diff --git a/docs/examples-docs/en-US/tabbar.md b/docs/examples-docs/en-US/tabbar.md new file mode 100644 index 000000000..effb13e1e --- /dev/null +++ b/docs/examples-docs/en-US/tabbar.md @@ -0,0 +1,98 @@ +## Tabbar + + + +### Install +``` javascript +import { Tabbar, TabbarItem } from 'vant'; + +Vue.component(Tabbar.name, Tabbar); +Vue.component(TabbarItem.name, TabbarItem); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + + 标签 + 标签 + 标签 + 标签 + +``` + +```javascript +export default { + data() { + return { + active: 0 + } + } +} +``` +::: + +#### 自定义图标 +通过 icon slot 自定义图标 + +:::demo 自定义图标 +```html + + + 自定义 + + + 标签 + 标签 + +``` + +```javascript +export default { + data() { + return { + active2: 0, + icon: { + normal: '//img.yzcdn.cn/1.png', + active: '//img.yzcdn.cn/2.png' + } + } + } +} +``` +::: + +### Tabbar API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前选中标签的索引 | `Number` | - | - | + +### Tabbar Event + +| Event | Description | Attribute | +|-----------|-----------|-----------| +| change | 切换标签时触发 | active: 当前选中标签 | + +### TabbarItem API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 | +| dot | 是否显示小红点 | `Boolean` | - | - | diff --git a/docs/examples-docs/en-US/tag.md b/docs/examples-docs/en-US/tag.md new file mode 100644 index 000000000..080fdda91 --- /dev/null +++ b/docs/examples-docs/en-US/tag.md @@ -0,0 +1,59 @@ +## Tag + +### Install +``` javascript +import { Tag } from 'vant'; + +Vue.component(Tag.name, Tag); +``` + +### Usage + +#### Basic Usage +通过 type 属性控制 Tag 颜色，默认为灰色 +:::demo Basic Usage +```html +标签 +标签 +标签 +标签 +``` +::: + +#### 空心样式 +设置`plain`属性设置为空心样式 + +:::demo 空心样式 +```html +标签 +标签 +标签 +标签 +``` +::: + +#### 标记样式 +通过`mark`设置为标记样式 + +:::demo 标记样式 +```html +标签 +标签 +标签 +标签 +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| type | Type | `String` | `''`| `primary` `success` `danger` | +| plain | 是否为空心样式 | `Boolean` | `false` | | +| mark | 是否为标记样式 | `Boolean` | `false` | | + +### Slot + +| name | Description | +|-----------|-----------| +| - | 自定义 Tag 显示内容 | diff --git a/docs/examples-docs/en-US/toast.md b/docs/examples-docs/en-US/toast.md new file mode 100644 index 000000000..ee3c47aa6 --- /dev/null +++ b/docs/examples-docs/en-US/toast.md @@ -0,0 +1,158 @@ + + +## Toast + +### Install + +```javascript +import { Toast } from 'vant'; +``` + +### Usage + +#### 文字提示 + +:::demo 文字提示 +```html +文字提示 +``` + +```javascript +export default { + methods: { + showToast() { + Toast('我是提示文案，建议不超过十五字~'); + } + } +} +``` +::: + +#### 加载提示 + +:::demo 加载提示 +```html +加载提示 +``` + +```javascript +export default { + methods: { + showLoadingToast() { + Toast.loading(); + } + } +} +``` +::: + +#### 成功/失败提示 + +:::demo 成功/失败提示 +```html +成功提示 +失败提示 +``` + +```javascript +export default { + methods: { + showSuccessToast() { + Toast.success('成功文案'); + }, + showFailToast() { + Toast.fail('失败文案'); + } + } +} +``` +::: + +#### Advanced Usage + +:::demo Advanced Usage +```html +#### Advanced Usage +``` + +```javascript +export default { + methods: { + showCustomizedToast() { + const toast = Toast.loading({ + duration: 0, // 持续展示 toast + forbidClick: true, // 禁用背景点击 + message: '倒计时 3 秒' + }); + + let second = 3; + const timer = setInterval(() => { + second--; + if (second) { + toast.message = `倒计时 ${second} 秒`; + } else { + clearInterval(timer); + Toast.clear(); + } + }, 1000); + } + } +}; +``` +::: + +### 方法 + +| 方法名 | Attribute | 返回值 | 介绍 | +|-----------|-----------|-----------|-------------| +| Toast | `options | message` | toast 实例 | 展示提示 | +| Toast.loading | `options | message` | toast 实例 | 展示加载提示 | +| Toast.success | `options | message` | toast 实例 | 展示成功提示 | +| Toast.fail | `options | message` | toast 实例 | 展示失败提示 | +| Toast.clear | - | `void` | 关闭提示 | + +### Options + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` | +| message | 内容 | `String` | `''` | - | +| forbidClick | 禁止背景点击 | `Boolean` | `false` | - | +| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 | diff --git a/docs/examples-docs/en-US/tree-select.md b/docs/examples-docs/en-US/tree-select.md new file mode 100644 index 000000000..165afce10 --- /dev/null +++ b/docs/examples-docs/en-US/tree-select.md @@ -0,0 +1,168 @@ + + +## TreeSelect + +### Install +``` javascript +import { TreeSelect } from 'vant'; + +Vue.component(TreeSelect.name, TreeSelect); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html + +``` + +```javascript +export default { + data() { + return { + items: items, + // 左侧高亮元素的index + mainActiveIndex: 0, + // 被选中元素的id + activeId: 1001 + }; + }, + methods: { + onNavClick(index) { + this.mainActiveIndex = index; + }, + onItemClick(data) { + console.log(data); + this.activeId = data.id; + } + } +} +``` +::: + +### API + +#### 传入参数 + +| Attribute | Description | Type | Default | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | | +| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | | +| activeId | 右侧选择项，高亮的数据id | Number | 0 | | + +#### 事件 +| Event | Description | Attribute | +|-----------|-----------|-----------| +| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 | +| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 | + +### Data Structure +#### items 分类显示所需数据的数据结构 +`items` 整体为一个数组，数组内包含一系列描述分类的 object。 + +每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项 +```javascript +[ + { + // 导航名称 + text: '所有城市', + // 该导航下所有的可选项 + children: [ + { + // 可选项的名称 + text: '温州', + // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的 + id: 1002 + }, + { + // 可选项的名称 + text: '杭州', + // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的 + id: 1001 + } + ] + } +] +``` diff --git a/docs/examples-docs/en-US/uploader.md b/docs/examples-docs/en-US/uploader.md new file mode 100644 index 000000000..635adaf3a --- /dev/null +++ b/docs/examples-docs/en-US/uploader.md @@ -0,0 +1,57 @@ + + +## Uploader + +### Install +``` javascript +import { Uploader } from 'vant'; + +Vue.component(Uploader.name, Uploader); +``` + +### Usage + +#### Basic Usage + +:::demo Basic Usage +```html +
+ + + +
+``` + +```javascript +export default { + methods: { + logContent(file) { + console.log(file) + } + } +}; +``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` | +| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - | +| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - | +| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - | + +### Slot + +| name | Description | +|-----------|-----------| +| - | 自定义上传显示图标 | diff --git a/docs/examples-docs/en-US/waterfall.md b/docs/examples-docs/en-US/waterfall.md new file mode 100644 index 000000000..a23ee8eea --- /dev/null +++ b/docs/examples-docs/en-US/waterfall.md @@ -0,0 +1,121 @@ +## Waterfall + +### Install + +#### 全局注册 + +`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装： + +```js +import Vue from 'vue'; +import { Waterfall } from 'vant'; + +Vue.use(Waterfall); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`： + +```js +import { Waterfall } from 'vant'; + +export default { + directives: { + WaterfallLower: Waterfall('lower'), + WaterfallUpper: Waterfall('upper') + } +}; +``` + +### Usage + + + + + +#### Basic Usage +使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件 + +注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串 +:::demo Basic Usage +```html +

当即将滚动到元素底部时，会自动加载更多

+
    +
  • {{ item }}
    • +
+``` +::: + +### API + +| Attribute | Description | Type | Default | Accepted Values | +|-----------|-----------|-----------|-------------|-------------| +| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | | +| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | | +| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | | +| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | | + diff --git a/docs/examples-docs/zh-CN/image-preview.md b/docs/examples-docs/zh-CN/image-preview.md index 962cfd7af..5a5b337ba 100644 --- a/docs/examples-docs/zh-CN/image-preview.md +++ b/docs/examples-docs/zh-CN/image-preview.md @@ -4,6 +4,11 @@ margin-left: 15px; } } +.van-image-preview { + img { + pointer-events: none; + } +}