feat(ContactCard): refactor style & add new prop show-set-default (#5083)
This commit is contained in:
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user