feat(ContactCard): refactor style & add new prop show-set-default (#5083)

This commit is contained in:
rex
2019-11-22 17:14:11 +08:00
committed by neverland
parent 1e836bf461
commit 23c419973a
7 changed files with 107 additions and 34 deletions
+2
View File
@@ -173,6 +173,8 @@ export default {
| 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 | Whether to show default contact switch | *boolean* | `false` | - |
| set-default-label | default contact switch label | *string* | - | - |
### ContactEdit Events
+2
View File
@@ -177,6 +177,8 @@ export default {
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - |
| set-default-label | 默认联系人栏文案 | *string* | - | - |
### ContactEdit Events
+6 -2
View File
@@ -28,6 +28,8 @@
:lazy-render="false"
>
<van-contact-edit
show-set-default
:set-default-label="$t('defaultLabel')"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@@ -51,10 +53,12 @@
export default {
i18n: {
'zh-CN': {
name: '张三'
name: '张三',
defaultLabel: '设为默认联系人'
},
'en-US': {
name: 'John Snow'
name: 'John Snow',
defaultLabel: 'Set as the default contact'
}
},
@@ -25,19 +25,29 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
<div class="van-contact-edit">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>张三</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
<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">
<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">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
<div class="van-cell__title"><span>设为默认联系人</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div>
</div>
</div>