blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/contact-card/README.md
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
src/contact-card/README.zh-CN.md
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

8
src/contact-card/demo/index.vue
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'
}
},

26
src/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -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>

66
src/contact-edit/index.js
View File

@ -3,6 +3,8 @@ import Button from '../button';
import Field from '../field';
import Toast from '../toast';
import Dialog from '../dialog';
import Switch from '../switch';
import Cell from '../cell';
import { isMobile } from '../utils/validate/mobile';
const [createComponent, bem, t] = createNamespace('contact-edit');
@ -17,6 +19,8 @@ export default createComponent({
isEdit: Boolean,
isSaving: Boolean,
isDeleting: Boolean,
showSetDefault: Boolean,
setDefaultLabel: String,
contactInfo: {
type: Object,
default: () => ({ ...defaultContact })
@ -94,34 +98,58 @@ export default createComponent({
return (
<div class={bem()}>
<Field
vModel={data.name}
clearable
maxlength="30"
label={t('name')}
placeholder={t('nameEmpty')}
error={errorInfo.name}
onFocus={onFocus('name')}
/>
<Field
vModel={data.tel}
clearable
type="tel"
label={t('tel')}
placeholder={t('telEmpty')}
error={errorInfo.tel}
onFocus={onFocus('tel')}
/>
<div class={bem('fields')}>
<Field
vModel={data.name}
clearable
maxlength="30"
label={t('name')}
placeholder={t('nameEmpty')}
error={errorInfo.name}
onFocus={onFocus('name')}
/>
<Field
vModel={data.tel}
clearable
type="tel"
label={t('tel')}
placeholder={t('telEmpty')}
error={errorInfo.tel}
onFocus={onFocus('tel')}
/>
</div>
{this.showSetDefault && (
<Cell
title={this.setDefaultLabel}
class={bem('switch-cell')}
border={false}
>
<Switch
vModel={data.isDefault}
size={24}
onChange={event => {
this.$emit('change-default', event);
}}
/>
</Cell>
)}
<div class={bem('buttons')}>
<Button
block
round
type="danger"
text={t('save')}
loading={this.isSaving}
onClick={this.onSave}
/>
{this.isEdit && (
<Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
<Button
block
round
text={t('delete')}
loading={this.isDeleting}
onClick={this.onDelete}
/>
)}
</div>
</div>

32
src/contact-edit/index.less
View File

@ -1,15 +1,39 @@
@import '../style/var';
.van-contact-edit {
padding: @contact-edit-padding;
&__fields {
overflow: hidden;
border-radius: @contact-edit-fields-radius;
.van-cell__title {
max-width: @contact-edit-field-label-width;
}
}
&__switch-cell {
margin-top: 10px;
padding-top: 9px;
padding-bottom: 9px;
overflow: hidden;
border-radius: @contact-edit-fields-radius;
.van-cell__value {
flex: none;
}
.van-switch {
vertical-align: top;
}
}
&__buttons {
padding: @contact-edit-buttons-padding;
}
.van-cell__title {
max-width: @contact-edit-field-label-width;
}
.van-button {
margin-bottom: @contact-edit-button-margin-bottom;
font-size: @contact-edit-button-font-size;
}
}

5
src/style/var.less
View File

@ -199,8 +199,11 @@
@contact-card-value-line-height: 20px;
// ContactEdit
@contact-edit-buttons-padding: @padding-xl @padding-md;
@contact-edit-padding: @padding-md;
@contact-edit-fields-radius: @border-radius-md;
@contact-edit-buttons-padding: @padding-xl 0;
@contact-edit-button-margin-bottom: @padding-sm;
@contact-edit-button-font-size: 16px;
@contact-edit-field-label-width: 65px;
// ContactList