feat(ContactList): refactor style & add new prop defaultTagText (#5089)

This commit is contained in:
rex
2019-11-26 20:44:35 +08:00
committed by neverland
parent c58f8e54ba
commit 592bcafda0
7 changed files with 88 additions and 47 deletions
+3
View File
@@ -155,6 +155,7 @@ export default {
| v-model | Id of chosen contact | *string \| number* | - | - |
| list | Contact list | *Contact[]* | `[]` | - |
| add-text | Add button text | *string* | `Add new contact` | - |
| default-tag-text | Default tag text | *string* | - | - |
### ContactList Events
@@ -164,6 +165,7 @@ export default {
| edit | Triggered when click edit button | item: contact objectindex |
| select | Triggered when select contact | item: contact object |
### ContactEdit Props
| Attribute | Description | Type | Default | Version |
@@ -190,3 +192,4 @@ export default {
| id | ID | *string \| number* |
| name | Name | *string* |
| tel | Phone | *string* |
| isDefault | Is default contact | *boolean* |
+2
View File
@@ -159,6 +159,7 @@ export default {
| v-model | 当前选中联系人的 id | *string \| number* | - | - |
| list | 联系人列表 | *Contact[]* | `[]` | - |
| add-text | 新建按钮文案 | *string* | `新建联系人` | - |
| default-tag-text | 默认联系人标签文案 | *string* | - | - |
### ContactList Events
@@ -194,3 +195,4 @@ export default {
| id | 每位联系人的唯一标识 | *string \| number* |
| name | 联系人姓名 | *string* |
| tel | 联系人手机号 | *string \| number* |
| isDefault | 是否为默认联系人 | *boolean* |
+7 -3
View File
@@ -16,6 +16,7 @@
<van-contact-list
v-model="chosenContactId"
:list="list"
:default-tag-text="$t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
@@ -54,11 +55,13 @@ export default {
i18n: {
'zh-CN': {
name: '张三',
defaultLabel: '设为默认联系人'
defaultLabel: '设为默认联系人',
defaultTagText: '默认'
},
'en-US': {
name: 'John Snow',
defaultLabel: 'Set as the default contact'
defaultLabel: 'Set as the default contact',
defaultTagText: 'default'
}
},
@@ -78,7 +81,8 @@ export default {
return {
name: this.$t('name'),
tel: '13000000000',
id: 0
id: 0,
isDefault: 1
};
},
@@ -11,16 +11,16 @@ exports[`renders demo correctly 1`] = `
<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-contact-list__item">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<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><span class="van-radio__label"><div class="van-contact-list__name">张三,13000000000</div></span>
</div>
</div><i class="van-icon van-icon-edit van-contact-list__edit">
<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><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</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"><span class="van-button__text">新建联系人</span></button></div>
</div>
</div>
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
@@ -3,15 +3,15 @@
exports[`ContactList render 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-contact-list__item">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<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><span class="van-radio__label"><div class="van-contact-list__name">test123123213</div></span>
</div>
</div><i class="van-icon van-icon-edit van-contact-list__edit">
<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">test123123213</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><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
</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"><span class="van-button__text">新建联系人</span></button></div>
</div>
`;