alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[Improvement] AddressEdit: fit in small screen (#1082)

Browse Source
This commit is contained in:
neverland
2018-05-16 20:52:18 +08:00
committed by GitHub
parent 42ac659aea
commit 1bae8ab986
9 changed files with 581 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/address-edit/Detail.vue
+5 -1
View File
@@ -73,7 +73,11 @@ export default create({
onFocus(e) {
this.isFocused = true;
this.$emit('focus', e);
this.$refs.root.scrollIntoView();
const { root } = this.$refs;
if (root && root.scrollIntoView) {
root.scrollIntoView();
}
},
onBlur(e) {
packages/address-edit/test/__snapshots__/index.spec.js.snap
+225
View File
@@ -0,0 +1,225 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`create a AddressEdit 1`] = `
<div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom">
<div maxlength="15" placeholder="名字" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>收货人</span>
<!---->
</div>
<div class="van-cell__value">
<input type="text" maxlength="15" placeholder="名字" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div placeholder="手机或固定电话" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>联系电话</span>
<!---->
</div>
<div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" value="" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div class="van-cell van-cell--clickable van-hairline van-address-edit__area">
<!---->
<div class="van-cell__title"><span>收件地区</span>
<!---->
</div>
<div class="van-cell__value"><span>选择省份</span> <span>选择城市</span> <span>选择地区</span></div>
<!---->
</div>
<div>
<div placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-cell van-hairline van-field van-field--has-icon">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
</div>
<div class="van-cell__value">
<textarea placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-field__control"></textarea>
<!---->
<div class="van-field__icon">
<div>
<!---->
</div>
</div>
<!---->
</div>
<!---->
</div>
<!---->
</div>
<!---->
<!---->
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--primary van-button--normal van-button--block">
<!----><span class="van-button__text">
保存
</span></button>
<!---->
</div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel">取消</div>
<!---->
<div class="van-picker__confirm">确认</div>
</div>
<div class="van-picker__loading">
<div class="van-loading van-loading--circular van-loading--black"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
<div class="van-picker__columns" style="height:220px;">
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
</div>
</div>
</div>
</div>
`;
exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit">
<div class="van-cell-group van-hairline--top-bottom">
<div maxlength="15" placeholder="名字" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>收货人</span>
<!---->
</div>
<div class="van-cell__value">
<input type="text" maxlength="15" placeholder="名字" value="测试" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div placeholder="手机或固定电话" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>联系电话</span>
<!---->
</div>
<div class="van-cell__value">
<input type="tel" placeholder="手机或固定电话" value="13000000000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div class="van-cell van-cell--clickable van-hairline van-address-edit__area">
<!---->
<div class="van-cell__title"><span>收件地区</span>
<!---->
</div>
<div class="van-cell__value"><span>浙江省</span> <span>杭州市</span> <span>西湖区</span></div>
<!---->
</div>
<div>
<div placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-cell van-hairline van-field van-field--has-icon">
<!---->
<div class="van-cell__title"><span>详细地址</span>
<!---->
</div>
<div class="van-cell__value">
<textarea placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-field__control">详细地址</textarea>
<!---->
<div class="van-field__icon">
<div>
<!---->
</div>
</div>
<!---->
</div>
<!---->
</div>
<!---->
</div>
<div placeholder="邮政编码(选填)" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>邮政编码</span>
<!---->
</div>
<div class="van-cell__value">
<input type="tel" placeholder="邮政编码(选填)" maxlength="6" value="10000" class="van-field__control">
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div class="van-cell van-cell--center van-switch-cell">
<!---->
<div class="van-cell__title"><span>设为默认收货地址</span>
<!---->
</div>
<div class="van-cell__value">
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:30px;">
<div class="van-switch__node">
<!---->
</div>
</div>
</div>
<!---->
</div>
</div>
<div class="van-address-edit__buttons">
<button class="van-button van-button--primary van-button--normal van-button--block">
<!----><span class="van-button__text">
保存
</span></button>
<!---->
</div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div class="van-picker__cancel">取消</div>
<!---->
<div class="van-picker__confirm">确认</div>
</div>
<!---->
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
<li class="van-ellipsis van-picker-column__item">北京市</li>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
<li class="van-ellipsis van-picker-column__item">北京市</li>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
<li class="van-ellipsis van-picker-column__item">东城区</li>
<li class="van-ellipsis van-picker-column__item">西城区</li>
<li class="van-ellipsis van-picker-column__item">朝阳区</li>
<li class="van-ellipsis van-picker-column__item">丰台区</li>
<li class="van-ellipsis van-picker-column__item">石景山区</li>
<li class="van-ellipsis van-picker-column__item">海淀区</li>
<li class="van-ellipsis van-picker-column__item">门头沟区</li>
<li class="van-ellipsis van-picker-column__item">房山区</li>
<li class="van-ellipsis van-picker-column__item">通州区</li>
<li class="van-ellipsis van-picker-column__item">顺义区</li>
<li class="van-ellipsis van-picker-column__item">昌平区</li>
<li class="van-ellipsis van-picker-column__item">大兴区</li>
<li class="van-ellipsis van-picker-column__item">怀柔区</li>
<li class="van-ellipsis van-picker-column__item">平谷区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
</div>
</div>
</div>
</div>
`;
packages/address-edit/test/index.spec.js
+130
View File
@@ -0,0 +1,130 @@
import { mount } from '@vue/test-utils';
import { renderToString } from '@vue/server-test-utils';
import AddressEdit from '../';
import areaList from '../../area/demo/area.simple';
const addressInfo = {
name: '测试',
tel: '13000000000',
province: '浙江省',
city: '杭州市',
county: '西湖区',
address_detail: '详细地址',
area_code: '110101',
postal_code: '10000',
is_default: true
};
const createComponent = () => {
const wrapper = mount(AddressEdit, {
propsData: {
areaList,
addressInfo,
showPostal: true
}
});
const button = wrapper.find('.van-button');
const field = wrapper.findAll('.van-field__control');
const { errorInfo, data } = wrapper.vm;
return {
vm: wrapper.vm,
data,
field,
button,
errorInfo
};
};
test('create a AddressEdit', () => {
expect(renderToString(AddressEdit)).toMatchSnapshot();
});
test('create a AddressEdit with props', () => {
const wrapper = renderToString(AddressEdit, {
propsData: {
areaList,
addressInfo,
showPostal: true,
showSetDefault: true,
showSearchResult: true
}
});
expect(wrapper).toMatchSnapshot();
});
test('valid name', () => {
const { data, field, button, errorInfo } = createComponent();
// name empty
data.name = '';
button.trigger('click');
expect(errorInfo.name).toBeTruthy();
field.at(0).trigger('focus');
expect(errorInfo.name).toBeFalsy();
// name too long
data.name = '1'.repeat(30);
button.trigger('click');
expect(errorInfo.name).toBeTruthy();
field.at(0).trigger('focus');
expect(errorInfo.name).toBeFalsy();
});
it('valid tel', () => {
const { data, field, button, errorInfo } = createComponent();
data.tel = '';
button.trigger('click');
expect(errorInfo.tel).toBeTruthy();
field.at(1).trigger('focus');
expect(errorInfo.tel).toBeFalsy();
});
it('valid area_code', () => {
const { data, button, errorInfo } = createComponent();
// area_code empty
data.area_code = '';
button.trigger('click');
expect(errorInfo['area_code']).toBeTruthy();
// area_code invalid
data.area_code = '-1';
button.trigger('click');
expect(errorInfo['area_code']).toBeTruthy();
});
it('valid address_detail', () => {
const { data, field, button, errorInfo } = createComponent();
data.address_detail = '';
button.trigger('click');
expect(errorInfo['address_detail']).toBeTruthy();
field.at(2).trigger('focus');
expect(errorInfo['address_detail']).toBeFalsy();
// // address_detail too long
data.address_detail = '1'.repeat(300);
button.trigger('click');
expect(errorInfo['address_detail']).toBeTruthy();
});
test('valid postal code', () => {
const { vm, data, field, button, errorInfo } = createComponent();
// postal_code invalid
data.postal_code = '123';
button.trigger('click');
expect(errorInfo['postal_code']).toBeTruthy();
field.at(3).trigger('focus');
expect(errorInfo['postal_code']).toBeFalsy();
// valid result
data.postal_code = '123456';
button.trigger('click');
// not show postal_code
data.postal_code = '156';
vm.showPostal = false;
button.trigger('click');
expect(errorInfo['postal_code']).toBeFalsy();
});
packages/area/demo/area.simple.js
+26
View File
@@ -0,0 +1,26 @@
export default {
'province_list': {
'110000': '北京市'
},
'city_list': {
'110100': '北京市'
},
'county_list': {
'110101': '东城区',
'110102': '西城区',
'110105': '朝阳区',
'110106': '丰台区',
'110107': '石景山区',
'110108': '海淀区',
'110109': '门头沟区',
'110111': '房山区',
'110112': '通州区',
'110113': '顺义区',
'110114': '昌平区',
'110115': '大兴区',
'110116': '怀柔区',
'110117': '平谷区',
'110228': '密云县',
'110229': '延庆县'
}
};
packages/button/demo/index.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
}
&--small,
&--normal {
&--normal:not(:last-child) {
margin-right: 10px;
}
packages/vant-css/src/address-edit.css
+1 -1
View File
@@ -18,7 +18,7 @@
text-align: left;
span {
margin-right: 20px;
margin-right: 15px;
}
}
}