mirror of
https://github.com/youzan/vant.git
synced 2025-12-18 02:06:02 +08:00
[Doc] translate AddressList & Contact (#437)
This commit is contained in:
@@ -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 object,index |
|
||||
| select | Triggered when select address | item: address object,index |
|
||||
|
||||
### 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` |
|
||||
|
||||
@@ -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 object,index |
|
||||
| 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 | content:contact info |
|
||||
| delete | Triggered when click delete button | content:contact 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` |
|
||||
|
||||
Reference in New Issue
Block a user