alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs(Contact): split demo and document (#7484)

Browse Source
This commit is contained in:
neverland
2020-11-03 17:58:17 +08:00
committed by GitHub
parent 7e1ad5dbd5
commit 821a2f81d6
19 changed files with 814 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/contact-list/README.md
+89
View 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_ |
src/contact-list/README.zh-CN.md
+93
View 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_ |
src/contact-list/demo/index.vue
+88
View 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>
src/contact-list/test/__snapshots__/demo.spec.js.snap
+31
View 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>
`;
src/contact-list/test/__snapshots__/index.spec.js.snap
+19
View File
@@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
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">
<!----></i>
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</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>
<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>
`;
src/contact-list/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);
src/contact-list/test/index.spec.js
+34
View 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();
});