mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] ContactEdit: jsx (#2508)
This commit is contained in:
neverland
GitHub
parent
7c0afd874b
commit
fb89ac9dfb
@ -27,33 +27,29 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
|
||||
<div class="van-contact-edit">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
|
||||
<div class="van-cell__title"><span>张三</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
|
||||
<div class="van-cell__title"><span>张三</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div placeholder="请填写电话" class="van-cell van-field">
|
||||
<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>
|
||||
<div placeholder="请填写电话" class="van-cell van-field">
|
||||
<div class="van-cell__title"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</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"><span class="van-button__text">保存</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
130
packages/contact-edit/index.js
Normal file
130
packages/contact-edit/index.js
Normal file
@ -0,0 +1,130 @@
|
||||
import { use } from '../utils';
|
||||
import Button from '../button';
|
||||
import Field from '../field';
|
||||
import Toast from '../toast';
|
||||
import Dialog from '../dialog';
|
||||
import validateMobile from '../utils/validate/mobile';
|
||||
|
||||
const [sfc, bem, t] = use('contact-edit');
|
||||
|
||||
const defaultContact = {
|
||||
tel: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
isEdit: Boolean,
|
||||
isSaving: Boolean,
|
||||
isDeleting: Boolean,
|
||||
contactInfo: {
|
||||
type: Object,
|
||||
default: () => ({ ...defaultContact })
|
||||
},
|
||||
telValidator: {
|
||||
type: Function,
|
||||
default: validateMobile
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
...defaultContact,
|
||||
...this.contactInfo
|
||||
},
|
||||
errorInfo: {
|
||||
name: false,
|
||||
tel: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
contactInfo(val) {
|
||||
this.data = {
|
||||
...defaultContact,
|
||||
...val
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus(key) {
|
||||
this.errorInfo[key] = false;
|
||||
},
|
||||
|
||||
getErrorMessageByKey(key) {
|
||||
const value = this.data[key].trim();
|
||||
switch (key) {
|
||||
case 'name':
|
||||
return value ? '' : t('nameEmpty');
|
||||
case 'tel':
|
||||
return this.telValidator(value) ? '' : t('telInvalid');
|
||||
}
|
||||
},
|
||||
|
||||
onSave() {
|
||||
const isValid = ['name', 'tel'].every(item => {
|
||||
const msg = this.getErrorMessageByKey(item);
|
||||
if (msg) {
|
||||
this.errorInfo[item] = true;
|
||||
Toast(msg);
|
||||
}
|
||||
return !msg;
|
||||
});
|
||||
|
||||
if (isValid && !this.isSaving) {
|
||||
this.$emit('save', this.data);
|
||||
}
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
Dialog.confirm({
|
||||
message: t('confirmDelete')
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { data, errorInfo } = this;
|
||||
const onFocus = name => () => this.onFocus(name);
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
<Field
|
||||
v-model={data.name}
|
||||
clearable
|
||||
maxlength="30"
|
||||
label={t('name')}
|
||||
placeholder={t('nameEmpty')}
|
||||
error={errorInfo.name}
|
||||
onFocus={onFocus('name')}
|
||||
/>
|
||||
<Field
|
||||
v-model={data.tel}
|
||||
clearable
|
||||
type="tel"
|
||||
label={t('tel')}
|
||||
placeholder={t('telEmpty')}
|
||||
error={errorInfo.tel}
|
||||
onFocus={onFocus('tel')}
|
||||
/>
|
||||
<div class={bem('buttons')}>
|
||||
<Button
|
||||
block
|
||||
type="danger"
|
||||
text={t('save')}
|
||||
loading={this.isSaving}
|
||||
onClick={this.onSave}
|
||||
/>
|
||||
{this.isEdit && (
|
||||
<Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<cell-group>
|
||||
<field
|
||||
v-model="data.name"
|
||||
maxlength="30"
|
||||
:label="$t('name')"
|
||||
:placeholder="$t('nameEmpty')"
|
||||
:error="errorInfo.name"
|
||||
@focus="onFocus('name')"
|
||||
/>
|
||||
<field
|
||||
v-model="data.tel"
|
||||
type="tel"
|
||||
:label="$t('tel')"
|
||||
:placeholder="$t('telEmpty')"
|
||||
:error="errorInfo.tel"
|
||||
@focus="onFocus('tel')"
|
||||
/>
|
||||
</cell-group>
|
||||
<div :class="b('buttons')">
|
||||
<van-button
|
||||
block
|
||||
type="danger"
|
||||
:text="$t('save')"
|
||||
:loading="isSaving"
|
||||
@click="onSave"
|
||||
/>
|
||||
<van-button
|
||||
v-if="isEdit"
|
||||
block
|
||||
:text="$t('delete')"
|
||||
:loading="isDeleting"
|
||||
@click="onDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Field from '../field';
|
||||
import VanButton from '../button';
|
||||
import Toast from '../toast';
|
||||
import Dialog from '../dialog';
|
||||
import validateMobile from '../utils/validate/mobile';
|
||||
import create from '../utils/create';
|
||||
|
||||
const defaultContact = {
|
||||
id: '',
|
||||
tel: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
export default create({
|
||||
name: 'contact-edit',
|
||||
|
||||
components: {
|
||||
Field,
|
||||
VanButton
|
||||
},
|
||||
|
||||
props: {
|
||||
isEdit: Boolean,
|
||||
isSaving: Boolean,
|
||||
isDeleting: Boolean,
|
||||
contactInfo: {
|
||||
type: Object,
|
||||
default: () => ({ ...defaultContact })
|
||||
},
|
||||
telValidator: {
|
||||
type: Function,
|
||||
default: validateMobile
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
...this.defaultContact,
|
||||
...this.contactInfo
|
||||
},
|
||||
errorInfo: {
|
||||
name: false,
|
||||
tel: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
contactInfo(val) {
|
||||
this.data = val;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus(key) {
|
||||
this.errorInfo[key] = false;
|
||||
},
|
||||
|
||||
getErrorMessageByKey(key) {
|
||||
const value = this.data[key].trim();
|
||||
switch (key) {
|
||||
case 'name':
|
||||
return value ? '' : this.$t('nameEmpty');
|
||||
case 'tel':
|
||||
return this.telValidator(value) ? '' : this.$t('telInvalid');
|
||||
}
|
||||
},
|
||||
|
||||
onSave() {
|
||||
const isValid = ['name', 'tel'].every(item => {
|
||||
const msg = this.getErrorMessageByKey(item);
|
||||
if (msg) {
|
||||
this.errorInfo[item] = true;
|
||||
Toast(msg);
|
||||
}
|
||||
return !msg;
|
||||
});
|
||||
|
||||
if (isValid && !this.isSaving) {
|
||||
this.$emit('save', this.data);
|
||||
}
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
Dialog.confirm({
|
||||
message: this.$t('confirmDelete')
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.data);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user