[Doc] translate AddressList & Contact (#437)

This commit is contained in:
neverland
2017-12-14 17:36:55 +08:00
committed by GitHub
parent 03bb3cc6ef
commit 5fe28b539c
9 changed files with 185 additions and 160 deletions

View File

@@ -28,15 +28,15 @@ export default {
list: [
{
id: '1',
name: '张三',
name: 'John Snow',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
address: 'Somewhere'
},
{
id: '2',
name: '李四',
name: 'Ned Stark',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
address: 'Somewhere'
}
]
}
@@ -44,10 +44,10 @@ export default {
methods: {
onAdd() {
Toast('新增收货地址');
Toast('Add');
},
onEdit(item, index) {
Toast('编辑收货地址:' + index);
Toast('Edit:' + index);
}
}
}
@@ -57,23 +57,23 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中地址的 id | String | - | - |
| list | 地址列表 | Array | `[]` | - |
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
| v-model | Id of chosen address | String | - | - |
| list | Address list | Array | `[]` | - |
| addButtonText | Add button text | String | `Add new address` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前地址对象index: 索引 |
| select | 切换选中的地址时触发 | item: 当前地址对象index: 索引 |
| add | Triggered when click add button | - |
| edit | Triggered when click edit button | item: address objectindex |
| select | Triggered when select address | item: address objectindex |
### Address Data Structure
### Data Structure
#### 地址列表字段说明
| key | Description | Type |
|-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` |
| tel | 收货人手机号 | `String` |
| address | 收货地址 | `String` |
| id | Id | `String | Number` |
| name | Name | `String` |
| tel | Phone | `String` |
| address | Address | `String` |

View File

@@ -1,5 +1,4 @@
## Contact
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
### Install
``` javascript
@@ -16,7 +15,7 @@ Vue.use(ContactEdit);
```html
<!-- 联系人卡片 -->
<!-- Contact Card -->
<van-contact-card
:type="cardType"
:name="currentContact.name"
@@ -24,7 +23,7 @@ Vue.use(ContactEdit);
@click="showList = true"
/>
<!-- 联系人列表 -->
<!-- Contact List -->
<van-popup v-model="showList" position="bottom">
<van-contact-list
v-model="chosenContactId"
@@ -35,7 +34,7 @@ Vue.use(ContactEdit);
/>
</van-popup>
<!-- 联系人编辑 -->
<!-- Contact Edit -->
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contactInfo="editingContact"
@@ -56,7 +55,7 @@ export default {
showEdit: false,
isEdit: false,
list: [{
name: '张三',
name: 'John Snow',
tel: '13000000000',
id: 0
}]
@@ -75,26 +74,26 @@ export default {
},
methods: {
// 添加联系人
// add contact
onAdd() {
this.editingContact = { id: this.list.length };
this.isEdit = false;
this.showEdit = true;
},
// 编辑联系人
// edit contact
onEdit(item) {
this.isEdit = true;
this.showEdit = true;
this.editingContact = item;
},
// 选中联系人
// select contact
onSelect() {
this.showList = false;
},
// 保存联系人
// save contact
onSave(info) {
this.showEdit = false;
this.showList = false;
@@ -107,7 +106,7 @@ export default {
this.chosenContactId = info.id;
},
// 删除联系人
// delete contact
onDelete(info) {
this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id);
@@ -124,7 +123,7 @@ export default {
```html
<van-contact-card
type="edit"
name="张三"
name="John Snow"
tel="13000000000"
:editable="false"
/>
@@ -134,47 +133,44 @@ export default {
### ContactCard API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type,分为添加和编辑两种样式 | `String` | `add` | `edit` |
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
| name | 联系人姓名 | `String` | - | - |
| tel | 联系人手机号 | `String` | - | - |
| type | Type | `String` | `add` | `edit` |
| addText | Add card text | `String` | `Add contact info` | - |
| name | Name | `String` | - | - |
| tel | Phone | `String` | - | - |
### ContactList API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
| list | 联系人列表 | `Array` | `[]` | - |
| v-model | Id of chosen contact | `String | Number` | - | - |
| addText | Add button text | `String` | `Add new contact` | - |
| list | Contact list | `Array` | `[]` | - |
### ContactList Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前联系人对象index: 索引 |
| select | 切换选中的联系人时触发 | item: 当前联系人对象index: 索引 |
| add | Triggered when click add button | - |
| edit | Triggered when click edit button | item: contact objectindex |
| select | Triggered when select contact | item: contact object |
### ContactEdit API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| contactInfo | 联系人信息 | `Object` | `[]` | - |
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
| contactInfo | Contact Info | `Object` | `[]` | - |
| isEdit | Whether is editing | `Boolean` | `false` | - |
| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
### ContactEdit Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content表单内容 |
| delete | 点击删除按钮时触发 | content表单内容 |
| save | Triggered when click save button | contentcontact info |
| delete | Triggered when click delete button | contentcontact info |
### Data Structure
#### 联系人Data Structure
### Contact Data Structure
| key | Description | Type |
|-----------|-----------|-----------|
| id | 每位联系人的唯一标识 | `String | Number` |
| name | 联系人姓名 | `String` |
| tel | 联系人手机号 | `String` |
| id | ID | `String | Number` |
| name | Name | `String` |
| tel | Phone | `String` |