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(AddressEdit): refactor style (#5117)

Browse Source
This commit is contained in:
rex 2019-11-26 20:44:15 +08:00 committed by neverland
parent 68fef3d72a
commit c58f8e54ba
6 changed files with 329 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/address-edit/Detail.js
View File

@ -17,6 +17,12 @@ export default createComponent({
showSearchResult: Boolean
},
computed: {
shouldShowSearchResult() {
return this.focused && this.searchResult && this.showSearchResult;
}
},
methods: {
onSelect(express) {
this.$emit('select-search', express);
@ -42,19 +48,30 @@ export default createComponent({
},
genSearchResult() {
const { searchResult } = this;
const show = this.focused && searchResult && this.showSearchResult;
if (show) {
const { value, shouldShowSearchResult, searchResult } = this;
if (shouldShowSearchResult) {
return searchResult.map(express => (
<Cell
key={express.name + express.address}
title={express.name}
class={bem('search-item')}
label={express.address}
border={false}
icon="location-o"
clickable
onClick={() => {
this.onSelect(express);
}}
scopedSlots={{
title: () =>
express.name && (
<div
domPropsInnerHTML={express.name.replace(
value,
`<span class=${bem('keyword')}>${value}</span>`
)}
/>
)
}}
/>
));
}
@ -72,6 +89,7 @@ export default createComponent({
type="textarea"
value={this.value}
error={this.error}
border={!this.shouldShowSearchResult}
label={t('label')}
maxlength={this.detailMaxlength}
placeholder={t('placeholder')}

6
src/address-edit/index.js
View File

@ -251,6 +251,7 @@ export default createComponent({
return (
<div class={bem()}>
<div class={bem('fields')}>
<Field
vModel={data.name}
clearable
@ -273,6 +274,7 @@ export default createComponent({
readonly
label={t('area')}
placeholder={t('areaPlaceholder')}
rightIcon="arrow"
value={this.areaText}
onClick={() => {
this.showAreaPopup = true;
@ -307,8 +309,10 @@ export default createComponent({
/>
)}
{this.slots()}
</div>
{this.showSetDefault && (
<SwitchCell
class={bem('default')}
vModel={data.isDefault}
vShow={!hideBottomFields}
title={t('defaultAddress')}
@ -320,6 +324,7 @@ export default createComponent({
<div vShow={!hideBottomFields} class={bem('buttons')}>
<Button
block
round
loading={this.isSaving}
type="danger"
text={this.saveButtonText || t('save')}
@ -328,6 +333,7 @@ export default createComponent({
{this.showDelete && (
<Button
block
round
loading={this.isDeleting}
text={this.deleteButtonText || t('delete')}
onClick={this.onDelete}

21
src/address-edit/index.less
View File

@ -1,6 +1,19 @@
@import '../style/var';
.van-address-edit {
padding: @address-edit-padding;
&__fields {
overflow: hidden;
border-radius: @padding-xs;
}
&__default {
margin-top: @padding-sm;
overflow: hidden;
border-radius: @padding-xs;
}
&__buttons {
padding: @address-edit-buttons-padding;
@ -12,6 +25,14 @@
&-detail {
padding: 0;
&__search-item {
background-color: #f2f3f5;
}
&__keyword {
color: @red;
}
&__finish {
color: @address-edit-detail-finish-color;
font-size: @address-edit-detail-finish-font-size;

11
src/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -19,7 +20,10 @@ exports[`renders demo correctly 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -38,7 +42,8 @@ exports[`renders demo correctly 1`] = `
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-switch-cell">
</div>
<div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -46,7 +51,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
<div class="van-address-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><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
</div>
</div>
</div>

62
src/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -2,6 +2,7 @@
exports[`create a AddressEdit 1`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -17,7 +18,10 @@ exports[`create a AddressEdit 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -30,12 +34,14 @@ exports[`create a AddressEdit 1`] = `
</div>
</div>
</div>
<div class="van-address-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 class="van-address-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>
`;
exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -51,7 +57,10 @@ exports[`create a AddressEdit with props 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -70,7 +79,8 @@ exports[`create a AddressEdit with props 1`] = `
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-switch-cell">
</div>
<div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -78,12 +88,13 @@ exports[`create a AddressEdit with props 1`] = `
</div>
</div>
</div>
<div class="van-address-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-address-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>
`;
exports[`set-default 1`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -99,7 +110,10 @@ exports[`set-default 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -118,7 +132,8 @@ exports[`set-default 1`] = `
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-switch-cell">
</div>
<div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -126,12 +141,13 @@ exports[`set-default 1`] = `
</div>
</div>
</div>
<div class="van-address-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-address-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>
`;
exports[`show area component 1`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -147,7 +163,10 @@ exports[`show area component 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -166,7 +185,8 @@ exports[`show area component 1`] = `
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-switch-cell">
</div>
<div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -174,12 +194,13 @@ exports[`show area component 1`] = `
</div>
</div>
</div>
<div class="van-address-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-address-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>
`;
exports[`show area component 2`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -195,7 +216,10 @@ exports[`show area component 2`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -214,7 +238,8 @@ exports[`show area component 2`] = `
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-cell--center van-switch-cell">
</div>
<div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -222,12 +247,13 @@ exports[`show area component 2`] = `
</div>
</div>
</div>
<div class="van-address-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-address-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>
`;
exports[`valid area placeholder confirm 1`] = `
<div class="van-address-edit">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value">
@ -243,7 +269,10 @@ exports[`valid area placeholder confirm 1`] = `
<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="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
@ -256,6 +285,7 @@ exports[`valid area placeholder confirm 1`] = `
</div>
</div>
</div>
<div class="van-address-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 class="van-address-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>
`;

3
src/style/var.less
View File

@ -75,7 +75,8 @@
@action-sheet-cancel-padding-color: @background-color;
// AddressEdit
@address-edit-buttons-padding: @padding-xl @padding-md;
@address-edit-padding: @padding-sm;
@address-edit-buttons-padding: @padding-xl @padding-base;
@address-edit-button-margin-bottom: @padding-sm;
@address-edit-detail-finish-color: @blue;
@address-edit-detail-finish-font-size: @font-size-sm;