mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Contact): split demo and document (#7484)
This commit is contained in:
neverland
GitHub
parent
7e1ad5dbd5
commit
821a2f81d6
@ -4,120 +4,57 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactCard, ContactList, ContactEdit } from 'vant';
|
||||
import { ContactCard } from 'vant';
|
||||
|
||||
Vue.use(ContactCard);
|
||||
Vue.use(ContactList);
|
||||
Vue.use(ContactEdit);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
### Add Contact
|
||||
|
||||
```html
|
||||
<!-- Contact Card -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- Contact List -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- Contact Edit -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
<van-contact-card type="add" @click="onAdd" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('add');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Edit Contact
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [
|
||||
{
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
id: 0,
|
||||
},
|
||||
],
|
||||
currentContact: {
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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: {
|
||||
// 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;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map((item) =>
|
||||
item.id === info.id ? info : item
|
||||
);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
// delete contact
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter((item) => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
onEdit() {
|
||||
Toast('edit');
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -136,62 +73,17 @@ export default {
|
||||
|
||||
## API
|
||||
|
||||
### ContactCard Props
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --------- | -------------------------- | -------- | ------------------ |
|
||||
| type | Can be set to `add` `edit` | _string_ | `add` |
|
||||
| name | Name | _string_ | - |
|
||||
| tel | Phone | _string_ | - |
|
||||
| add-text | Add card text | _string_ | `Add contact info` |
|
||||
| Attribute | Description | Type | Default |
|
||||
| --------- | -------------------- | -------- | ------------------ |
|
||||
| type | Can be set to `edit` | _string_ | `add` |
|
||||
| name | Name | _string_ | - |
|
||||
| tel | Phone | _string_ | - |
|
||||
| add-text | Add card text | _string_ | `Add contact info` |
|
||||
|
||||
### ContactCard Events
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ----- | ---------------------- | -------------- |
|
||||
| click | Triggered when clicked | _event: Event_ |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | Id of chosen contact | _number \| string_ | - |
|
||||
| list | Contact list | _Contact[]_ | `[]` |
|
||||
| add-text | Add button text | _string_ | `Add new contact` |
|
||||
| default-tag-text `v2.3.0` | Default tag text | _string_ | - |
|
||||
|
||||
### ContactList Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------ | -------------------------------- | --------------------------- |
|
||||
| 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 Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| contact-info | Contact Info | _object_ | `[]` |
|
||||
| is-edit | Whether is editing | _boolean_ | `false` |
|
||||
| is-saving | Whether to show save 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_ | - |
|
||||
| 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_ | - |
|
||||
|
||||
### ContactEdit Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------ | ---------------------------------- | --------------------- |
|
||||
| save | Triggered when click save button | content：contact info |
|
||||
| delete | Triggered when click delete button | content：contact info |
|
||||
|
||||
### Data Structure of Contact
|
||||
|
||||
| key | Description | Type |
|
||||
| --------- | ------------------ | ------------------ |
|
||||
| id | ID | _number \| string_ |
|
||||
| name | Name | _string_ |
|
||||
| tel | Phone | _string_ |
|
||||
| isDefault | Is default contact | _boolean_ |
|
||||
|
||||
@ -1,127 +1,64 @@
|
||||
# Contact 联系人
|
||||
# ContactCard 联系人卡片
|
||||
|
||||
### 介绍
|
||||
|
||||
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
|
||||
以卡片的形式展示联系人信息。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactCard, ContactList, ContactEdit } from 'vant';
|
||||
import { ContactCard } from 'vant';
|
||||
|
||||
Vue.use(ContactCard);
|
||||
Vue.use(ContactList);
|
||||
Vue.use(ContactEdit);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
### 添加联系人
|
||||
|
||||
```html
|
||||
<!-- 联系人卡片 -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- 联系人列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 联系人编辑 -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
<van-contact-card type="add" @click="onAdd" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 编辑联系人
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [
|
||||
{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0,
|
||||
},
|
||||
],
|
||||
currentContact: {
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
onEdit() {
|
||||
Toast('编辑');
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -135,62 +72,17 @@ export default {
|
||||
|
||||
## API
|
||||
|
||||
### ContactCard Props
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | --------------------------- | -------- | -------------------- |
|
||||
| type | 类型，可选值为 `add` `edit` | _string_ | `add` |
|
||||
| name | 联系人姓名 | _string_ | - |
|
||||
| tel | 联系人手机号 | _string_ | - |
|
||||
| add-text | 添加时的文案提示 | _string_ | `添加订单联系人信息` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ------------------------- | -------- | ------------ |
|
||||
| type | 卡片类型，可选值为 `edit` | _string_ | `add` |
|
||||
| name | 联系人姓名 | _string_ | - |
|
||||
| tel | 联系人手机号 | _string_ | - |
|
||||
| add-text | 添加时的文案提示 | _string_ | `添加联系人` |
|
||||
|
||||
### ContactCard Events
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------- | -------------- |
|
||||
| click | 点击时触发 | _event: Event_ |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | 当前选中联系人的 id | _number \| string_ | - |
|
||||
| list | 联系人列表 | _Contact[]_ | `[]` |
|
||||
| add-text | 新建按钮文案 | _string_ | `新建联系人` |
|
||||
| default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - |
|
||||
|
||||
### ContactList Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------------------- | --------------------------------- |
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
|
||||
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
|
||||
|
||||
### ContactEdit Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| contact-info | 联系人信息 | _object_ | `[]` |
|
||||
| is-edit | 是否为编辑联系人 | _boolean_ | `false` |
|
||||
| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
|
||||
| tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - |
|
||||
| show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` |
|
||||
| set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - |
|
||||
|
||||
### ContactEdit Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------ | ----------------- |
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
|
||||
### Contact 数据结构
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | -------------------- | ------------------ |
|
||||
| id | 每位联系人的唯一标识 | _number \| string_ |
|
||||
| name | 联系人姓名 | _string_ |
|
||||
| tel | 联系人手机号 | _number \| string_ |
|
||||
| isDefault | 是否为默认联系人 | _boolean_ |
|
||||
|
||||
@ -1,41 +1,23 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block :title="t('addContact')">
|
||||
<van-contact-card type="add" @click="onAdd" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('editContact')">
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
type="edit"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
@click="onEdit"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom" :lazy-render="false">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
:default-tag-text="t('defaultTagText')"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showEdit" position="bottom" :lazy-render="false">
|
||||
<van-contact-edit
|
||||
show-set-default
|
||||
:set-default-label="t('defaultLabel')"
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('uneditable')">
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
:name="mockContact.name"
|
||||
:tel="mockContact.tel"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
:editable="false"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -43,104 +25,43 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Toast from '../../toast';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
add: '新增',
|
||||
edit: '编辑',
|
||||
name: '张三',
|
||||
defaultLabel: '设为默认联系人',
|
||||
defaultTagText: '默认',
|
||||
addContact: '添加联系人',
|
||||
editContact: '编辑联系人',
|
||||
},
|
||||
'en-US': {
|
||||
add: 'Add',
|
||||
edit: 'Edit',
|
||||
name: 'John Snow',
|
||||
defaultLabel: 'Set as the default contact',
|
||||
defaultTagText: 'default',
|
||||
addContact: 'Add Contact',
|
||||
editContact: 'Edit Contact',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
mockContact() {
|
||||
currentContact() {
|
||||
return {
|
||||
name: this.t('name'),
|
||||
tel: '13000000000',
|
||||
id: 0,
|
||||
isDefault: 1,
|
||||
};
|
||||
},
|
||||
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter((item) => item.id === id)[0] : {};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.list.push(this.mockContact);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
Toast(this.t('add'));
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
onEdit() {
|
||||
Toast(this.t('edit'));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-contact-card {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,49 +8,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-contact-card__value">添加联系人</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
|
||||
<div class="van-contact-list">
|
||||
<div role="radiogroup" class="van-radio-group van-contact-list__group">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
|
||||
<!----></i>
|
||||
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
|
||||
<div class="van-contact-edit">
|
||||
<div class="van-contact-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>张三</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认联系人</span></div>
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit"><i class="van-icon van-icon-contact van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__value van-cell__value--alone van-contact-card__value">
|
||||
<div>张三：张三</div>
|
||||
<div>电话：13000000000</div>
|
||||
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -1,143 +1,33 @@
|
||||
import ContactCard from '..';
|
||||
import ContactList from '../../contact-list';
|
||||
import ContactEdit from '../../contact-edit';
|
||||
import { mount, later } from '../../../test';
|
||||
import { mount } from '../../../test';
|
||||
|
||||
const contactInfo = {
|
||||
name: 'test',
|
||||
tel: '123123213',
|
||||
};
|
||||
|
||||
describe('ContactCard', () => {
|
||||
test('click event', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(ContactCard, {
|
||||
context: {
|
||||
on: {
|
||||
click,
|
||||
},
|
||||
test('should emit click event after clicking the ContactCard', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(ContactCard, {
|
||||
context: {
|
||||
on: {
|
||||
click,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(1);
|
||||
},
|
||||
});
|
||||
|
||||
test('not editable', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(ContactCard, {
|
||||
propsData: {
|
||||
editable: false,
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
click,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
describe('ContactList', () => {
|
||||
test('render', () => {
|
||||
const wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
list: [contactInfo],
|
||||
test('should not emit click event after clicking the uneditable ContactCard', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(ContactCard, {
|
||||
propsData: {
|
||||
editable: false,
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
click,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
},
|
||||
});
|
||||
|
||||
test('select event', () => {
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
list: [contactInfo],
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
select: onSelect,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-radio__icon').trigger('click');
|
||||
|
||||
expect(onSelect).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContactEdit', () => {
|
||||
const createComponent = () => {
|
||||
const wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
contactInfo,
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
const field = wrapper.findAll('.van-field__control');
|
||||
const { errorInfo, data } = wrapper.vm;
|
||||
return {
|
||||
wrapper,
|
||||
data,
|
||||
field,
|
||||
button,
|
||||
errorInfo,
|
||||
};
|
||||
};
|
||||
|
||||
test('valid name', () => {
|
||||
const { data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// name empty
|
||||
data.name = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.name).toBeTruthy();
|
||||
field.at(0).trigger('focus');
|
||||
expect(errorInfo.name).toBeFalsy();
|
||||
});
|
||||
|
||||
test('valid tel', () => {
|
||||
const { data, field, button, errorInfo, wrapper } = createComponent();
|
||||
data.tel = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.tel).toBeTruthy();
|
||||
field.at(1).trigger('focus');
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
|
||||
data.tel = '13000000000';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
expect(wrapper.emitted('save')[0][0]).toEqual({
|
||||
name: 'test',
|
||||
tel: '13000000000',
|
||||
});
|
||||
});
|
||||
|
||||
test('watch contact info', () => {
|
||||
const wrapper = mount(ContactEdit);
|
||||
wrapper.setProps({ contactInfo: { name: '123' } });
|
||||
expect(wrapper.vm.data.name).toEqual('123');
|
||||
});
|
||||
|
||||
test('delete contact', async () => {
|
||||
const wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
isEdit: true,
|
||||
},
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.findAll('.van-button').at(1);
|
||||
deleteButton.trigger('click');
|
||||
|
||||
await later();
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
73
src/contact-edit/README.md
Normal file
73
src/contact-edit/README.md
Normal file
@ -0,0 +1,73 @@
|
||||
# ContactEdit
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactEdit } from 'vant';
|
||||
|
||||
Vue.use(ContactEdit);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-contact-edit
|
||||
is-edit
|
||||
show-set-default
|
||||
:contact-info="editingContact"
|
||||
set-default-label="Set as the default contact"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editingContact: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSave(contactInfo) {
|
||||
Toast('Save');
|
||||
},
|
||||
onDelete(contactInfo) {
|
||||
Toast('Delete');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| contact-info | Contact Info | _Contact_ | `[]` |
|
||||
| is-edit | Whether is editing | _boolean_ | `false` |
|
||||
| is-saving | Whether to show save 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_ | - |
|
||||
| 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_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| ------ | ---------------------------------- | --------------------- |
|
||||
| save | Triggered when click save button | content：contact info |
|
||||
| delete | Triggered when click delete button | content：contact info |
|
||||
|
||||
### Data Structure of Contact
|
||||
|
||||
| key | Description | Type |
|
||||
| ---- | ----------- | -------- |
|
||||
| name | Name | _string_ |
|
||||
| tel | Phone | _string_ |
|
||||
77
src/contact-edit/README.zh-CN.md
Normal file
77
src/contact-edit/README.zh-CN.md
Normal file
@ -0,0 +1,77 @@
|
||||
# ContactEdit 联系人编辑
|
||||
|
||||
### 介绍
|
||||
|
||||
编辑并保存联系人信息。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactEdit } from 'vant';
|
||||
|
||||
Vue.use(ContactEdit);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-contact-edit
|
||||
is-edit
|
||||
show-set-default
|
||||
:contact-info="editingContact"
|
||||
set-default-label="设为默认联系人"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
editingContact: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSave(contactInfo) {
|
||||
Toast('保存');
|
||||
},
|
||||
onDelete(contactInfo) {
|
||||
Toast('删除');
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| contact-info | 联系人信息 | _Contact_ | `{}` |
|
||||
| is-edit | 是否为编辑联系人 | _boolean_ | `false` |
|
||||
| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
|
||||
| tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - |
|
||||
| show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` |
|
||||
| set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------ | ----------------- |
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
|
||||
### Contact 数据结构
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ---- | ------------ | ------------------ |
|
||||
| name | 联系人姓名 | _string_ |
|
||||
| tel | 联系人手机号 | _number \| string_ |
|
||||
50
src/contact-edit/demo/index.vue
Normal file
50
src/contact-edit/demo/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-contact-edit
|
||||
is-edit
|
||||
show-set-default
|
||||
:contact-info="editingContact"
|
||||
:set-default-label="t('defaultLabel')"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
defaultLabel: '设为默认联系人',
|
||||
},
|
||||
'en-US': {
|
||||
defaultLabel: 'Set as the default contact',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editingContact: {},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
this.$toast(this.t('save'));
|
||||
},
|
||||
onDelete() {
|
||||
this.$toast(this.t('delete'));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-contact-edit {
|
||||
.van-doc-demo-block__title {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
35
src/contact-edit/test/__snapshots__/demo.spec.js.snap
Normal file
35
src/contact-edit/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,35 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-contact-edit">
|
||||
<div class="van-contact-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认联系人</span></div>
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">删除</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
4
src/contact-edit/test/demo.spec.js
Normal file
4
src/contact-edit/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
77
src/contact-edit/test/index.spec.js
Normal file
77
src/contact-edit/test/index.spec.js
Normal file
@ -0,0 +1,77 @@
|
||||
import ContactEdit from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
|
||||
const contactInfo = {
|
||||
name: 'test',
|
||||
tel: '123123213',
|
||||
};
|
||||
|
||||
const createComponent = () => {
|
||||
const wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
contactInfo,
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
const field = wrapper.findAll('.van-field__control');
|
||||
const { errorInfo, data } = wrapper.vm;
|
||||
return {
|
||||
wrapper,
|
||||
data,
|
||||
field,
|
||||
button,
|
||||
errorInfo,
|
||||
};
|
||||
};
|
||||
|
||||
test('should validate contact name before submit form', () => {
|
||||
const { data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// name empty
|
||||
data.name = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.name).toBeTruthy();
|
||||
field.at(0).trigger('focus');
|
||||
expect(errorInfo.name).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should validate contact tel before submit form', () => {
|
||||
const { data, field, button, errorInfo, wrapper } = createComponent();
|
||||
data.tel = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.tel).toBeTruthy();
|
||||
field.at(1).trigger('focus');
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
|
||||
data.tel = '13000000000';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
expect(wrapper.emitted('save')[0][0]).toEqual({
|
||||
name: 'test',
|
||||
tel: '13000000000',
|
||||
});
|
||||
});
|
||||
|
||||
test('should watch contact info', () => {
|
||||
const wrapper = mount(ContactEdit);
|
||||
wrapper.setProps({ contactInfo: { name: '123' } });
|
||||
expect(wrapper.vm.data.name).toEqual('123');
|
||||
});
|
||||
|
||||
test('should allow deleting contact', async () => {
|
||||
const wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
isEdit: true,
|
||||
},
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.findAll('.van-button').at(1);
|
||||
deleteButton.trigger('click');
|
||||
|
||||
await later();
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
|
||||
await later();
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
89
src/contact-list/README.md
Normal file
89
src/contact-list/README.md
Normal file
@ -0,0 +1,89 @@
|
||||
# ContactList
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactList } from 'vant';
|
||||
|
||||
Vue.use(ContactList);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
default-tag-text="default"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('Add');
|
||||
},
|
||||
onEdit(contact) {
|
||||
Toast('Edit' + contact.id);
|
||||
},
|
||||
onSelect(contact) {
|
||||
Toast('Select' + contact.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | Id of chosen contact | _number \| string_ | - |
|
||||
| list | Contact list | _Contact[]_ | `[]` |
|
||||
| add-text | Add button text | _string_ | `Add new contact` |
|
||||
| default-tag-text `v2.3.0` | Default tag text | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| add | Triggered when click add button | - |
|
||||
| edit | Triggered when click edit button | _contact: Contact，index: number_ |
|
||||
| select | Triggered when select contact | _contact: Contact, index: number_ |
|
||||
|
||||
### Data Structure of Contact
|
||||
|
||||
| key | Description | Type |
|
||||
| --------- | ------------------ | ------------------ |
|
||||
| id | ID | _number \| string_ |
|
||||
| name | Name | _string_ |
|
||||
| tel | Phone | _string_ |
|
||||
| isDefault | Is default contact | _boolean_ |
|
||||
93
src/contact-list/README.zh-CN.md
Normal file
93
src/contact-list/README.zh-CN.md
Normal file
@ -0,0 +1,93 @@
|
||||
# ContactList 联系人列表
|
||||
|
||||
### 介绍
|
||||
|
||||
展示联系人列表。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ContactList } from 'vant';
|
||||
|
||||
Vue.use(ContactList);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
default-tag-text="默认"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增');
|
||||
},
|
||||
onEdit(contact) {
|
||||
Toast('编辑' + contact.id);
|
||||
},
|
||||
onSelect(contact) {
|
||||
Toast('选择' + contact.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | 当前选中联系人的 id | _number \| string_ | - |
|
||||
| list | 联系人列表 | _Contact[]_ | `[]` |
|
||||
| add-text | 新建按钮文案 | _string_ | `新建联系人` |
|
||||
| default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------------------- | --------------------------------- |
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | _contact: Contact，index: number_ |
|
||||
| select | 切换选中的联系人时触发 | _contact: Contact，index: number_ |
|
||||
|
||||
### Contact 数据结构
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | -------------------- | ------------------ |
|
||||
| id | 每位联系人的唯一标识 | _number \| string_ |
|
||||
| name | 联系人姓名 | _string_ |
|
||||
| tel | 联系人手机号 | _number \| string_ |
|
||||
| isDefault | 是否为默认联系人 | _boolean_ |
|
||||
88
src/contact-list/demo/index.vue
Normal file
88
src/contact-list/demo/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="t('list')"
|
||||
:default-tag-text="t('defaultTagText')"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
add: '新增',
|
||||
edit: '编辑',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
select: '选择',
|
||||
defaultTagText: '默认',
|
||||
},
|
||||
'en-US': {
|
||||
add: 'Add',
|
||||
edit: 'Edit',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
},
|
||||
],
|
||||
select: 'Select',
|
||||
defaultTagText: 'default',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: '1',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.$toast(this.t('add'));
|
||||
},
|
||||
onEdit(contact) {
|
||||
this.$toast(this.t('edit') + contact.id);
|
||||
},
|
||||
onSelect(contact) {
|
||||
this.$toast(this.t('select') + contact.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-contact-card {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
src/contact-list/test/__snapshots__/demo.spec.js.snap
Normal file
31
src/contact-list/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,31 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-contact-list">
|
||||
<div role="radiogroup" class="van-radio-group van-contact-list__group">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
|
||||
<!----></i>
|
||||
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
|
||||
<!----></i>
|
||||
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">李四，1310000000</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ContactList render 1`] = `
|
||||
exports[`should render ContactList correctly 1`] = `
|
||||
<div class="van-contact-list">
|
||||
<div role="radiogroup" class="van-radio-group van-contact-list__group">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
|
||||
4
src/contact-list/test/demo.spec.js
Normal file
4
src/contact-list/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
34
src/contact-list/test/index.spec.js
Normal file
34
src/contact-list/test/index.spec.js
Normal file
@ -0,0 +1,34 @@
|
||||
import ContactList from '../../contact-list';
|
||||
import { mount } from '../../../test';
|
||||
|
||||
const contactInfo = {
|
||||
name: 'test',
|
||||
tel: '123123213',
|
||||
};
|
||||
|
||||
test('should render ContactList correctly', () => {
|
||||
const wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
list: [contactInfo],
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should emit select event after clicking the radio', () => {
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
list: [contactInfo],
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
select: onSelect,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-radio__icon').trigger('click');
|
||||
|
||||
expect(onSelect).toHaveBeenCalled();
|
||||
});
|
||||
@ -359,7 +359,15 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: 'contact-card',
|
||||
title: 'Contact 联系人',
|
||||
title: 'ContactCard 联系人卡片',
|
||||
},
|
||||
{
|
||||
path: 'contact-edit',
|
||||
title: 'ContactEdit 联系人编辑',
|
||||
},
|
||||
{
|
||||
path: 'contact-list',
|
||||
title: 'ContactList 联系人列表',
|
||||
},
|
||||
{
|
||||
path: 'coupon-list',
|
||||
@ -714,7 +722,15 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: 'contact-card',
|
||||
title: 'Contact',
|
||||
title: 'ContactCard',
|
||||
},
|
||||
{
|
||||
path: 'contact-edit',
|
||||
title: 'ContactEdit',
|
||||
},
|
||||
{
|
||||
path: 'contact-list',
|
||||
title: 'ContactList',
|
||||
},
|
||||
{
|
||||
path: 'coupon-list',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user