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

[Improvement] AddressEdit: add focus、change-area、select-search events (#426)

Browse Source
This commit is contained in:
neverland 2017-12-13 17:36:25 +08:00 committed by GitHub
parent a19cfe51ca
commit c2bef6ef15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 148 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/markdown/zh-CN/address-edit.md
View File

@ -74,6 +74,9 @@ export default {
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key |
| select-search | 选中搜索结果时触发 | value: 搜索结果 |
| change-area | 修改收件地区时触发 | values: 地区信息 |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
### 数据格式

3
packages/address-edit/Detail.vue
View File

@ -16,7 +16,7 @@
>
<div slot="icon">
<span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">{{ $t('complete') }}</span>
<icon v-else-if="showIcon" name="clear" />
<icon v-else-if="showIcon" name="clear" />
</div>
</field>
@ -101,6 +101,7 @@ export default create({
onSuggestSelect(express) {
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
this.$emit('select-search', express);
},
isString(str) {

31
packages/address-edit/index.vue
View File

@ -30,6 +30,7 @@
@focus="onFocus('address_detail')"
@blur="onDetailBlur"
@input="onChangeDetail"
@select-search="$emit('select-search', $event)"
/>
<field
v-if="showPostal"
@ -41,8 +42,8 @@
maxlength="6"
class="van-hairline--top"
:error="errorInfo.postal_code"
@focus="onFocus('postal_code')">
</field>
@focus="onFocus('postal_code')"
/>
<switch-cell
v-if="showSetDefault"
v-show="!hideBottomFields"
@ -60,6 +61,7 @@
</div>
<popup v-model="showAreaSelect" position="bottom">
<van-area
ref="area"
:value="currentInfo.area_code"
:areaList="areaList"
@confirm="onAreaConfirm"
@ -164,6 +166,7 @@ export default create({
onFocus(key) {
this.errorInfo[key] = false;
this.detailFocused = key === 'address_detail';
this.$emit('focus', key);
},
onDetailBlur() {
@ -179,13 +182,18 @@ export default create({
if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
return Toast(this.$t('areaWrong'));
}
this.assignAreaValues(values);
this.showAreaSelect = false;
this.$emit('change-area', values);
},
assignAreaValues(values) {
Object.assign(this.currentInfo, {
province: values[0].name,
city: values[1].name,
county: values[2].name,
area_code: values[2].code
});
this.showAreaSelect = false;
},
onSaveAddress() {
@ -242,6 +250,23 @@ export default create({
}).then(() => {
this.$emit('delete', this.currentInfo);
});
},
// get values of area component
getArea() {
const { area } = this.$refs;
return area ? area.getValues() : [];
},
// set area code to area component
setAreaCode(code) {
this.currentInfo.area_code = code;
this.$nextTick(() => {
const { area } = this.$refs;
if (area) {
this.assignAreaValues(area.getValues());
}
});
}
}
});

5
packages/area/index.vue
View File

@ -145,6 +145,11 @@ export default create({
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
);
}
},
getValues() {
const { picker } = this.$refs;
return picker ? picker.getValues() : [];
}
}
});

112
test/unit/specs/address-edit.spec.js
View File

@ -15,9 +15,15 @@ describe('AddressEdit', () => {
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
).to.equal('选择省');
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
).to.equal('选择市');
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
).to.equal('选择区');
});
it('create a AddressEdit with props', () => {
@ -43,13 +49,27 @@ describe('AddressEdit', () => {
}
});
expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.name);
expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
expect(wrapper.find('.van-field__control')[0].element.value).to.equal(
addressInfo.name
);
expect(wrapper.find('.van-field__control')[1].element.value).to.equal(
addressInfo.tel
);
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
addressInfo.address_detail
);
expect(wrapper.find('.van-field__control')[3].element.value).to.equal(
addressInfo.postal_code
);
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
).to.equal(addressInfo.province);
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
).to.equal(addressInfo.city);
expect(
wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
).to.equal(addressInfo.county);
expect(wrapper.find('.van-switch-cell').length).to.equal(1);
});
@ -155,14 +175,18 @@ describe('AddressEdit', () => {
propsData: {
addressInfo: {},
showSearchResult: true,
searchResult: [{
name: '黄龙万科中心',
address: '杭州市西湖区'
}, {
name: '黄龙万科中心H座'
}, {
address: '杭州市西湖区'
}]
searchResult: [
{
name: '黄龙万科中心',
address: '杭州市西湖区'
},
{
name: '黄龙万科中心H座'
},
{
address: '杭州市西湖区'
}
]
}
});
@ -173,15 +197,21 @@ describe('AddressEdit', () => {
items[0].trigger('click');
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
'杭州市西湖区 黄龙万科中心'
);
items[1].trigger('click');
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
'黄龙万科中心H座'
);
items[2].trigger('click');
wrapper.vm.$nextTick(() => {
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
expect(
wrapper.find('.van-field__control')[2].element.value
).to.equal('杭州市西湖区');
wrapper.find('.van-field__control')[2].trigger('blur');
setTimeout(() => {
@ -207,7 +237,11 @@ describe('AddressEdit', () => {
wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
wrapper.vm.onAreaConfirm([{ name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' }]);
wrapper.vm.onAreaConfirm([
{ name: '浙江省' },
{ name: '杭州市' },
{ name: '西湖区', code: '123456' }
]);
expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
@ -249,7 +283,7 @@ describe('AddressEdit', () => {
it('on change detail', done => {
wrapper = mount(AddressEdit);
wrapper.vm.$on('change-detail', (val) => {
wrapper.vm.$on('change-detail', val => {
expect(val).to.equal('123');
done();
});
@ -322,4 +356,36 @@ describe('AddressEdit', () => {
done();
});
});
it('set/get area code', done => {
wrapper = mount(AddressEdit, {
propsData: {
areaList,
addressInfo: {
area_code: ''
}
}
});
expect(wrapper.vm.getArea()).to.eql([
{ code: '-1', name: '选择省份' },
{ code: '-1', name: '选择城市' },
{ code: '-1', name: '选择地区' }
]);
wrapper.vm.setAreaCode('110101');
setTimeout(() => {
expect(wrapper.vm.currentInfo.area_code).to.eql('110101');
expect(wrapper.vm.getArea()).to.eql([
{ code: '110000', name: '北京市' },
{ code: '110100', name: '北京市' },
{ code: '110101', name: '东城区' }
]);
wrapper.vm.$refs = [];
wrapper.vm.setAreaCode('110102');
expect(wrapper.vm.getArea()).to.eql([]);
done();
}, 50);
});
});

24
test/unit/specs/area.spec.js
View File

@ -18,7 +18,7 @@ describe('Area', () => {
expect(wrapper.hasClass('van-area')).to.be.true;
});
it('create an area with default value', (done) => {
it('create an area with default value', done => {
wrapper = mount(Area, {
propsData: {
areaList: AreaList,
@ -38,7 +38,7 @@ describe('Area', () => {
});
});
it('create an area and set value', (done) => {
it('create an area and set value', done => {
wrapper = mount(Area, {
propsData: {
areaList: AreaList,
@ -89,7 +89,7 @@ describe('Area', () => {
expect(wrapper.vm.areaColumns.length).to.equal(1);
});
it('create an area and click cancel', (done) => {
it('create an area and click cancel', done => {
wrapper = mount(Area, {
propsData: {
areaList: AreaList
@ -125,4 +125,22 @@ describe('Area', () => {
expect(list.length).to.equal(33);
});
it('getValues method', () => {
wrapper = mount(Area, {
propsData: {
value: '110101',
areaList: AreaList
}
});
expect(wrapper.vm.getValues()).to.eql([
{ code: '110000', name: '北京市' },
{ code: '110100', name: '北京市' },
{ code: '110101', name: '东城区' }
]);
wrapper.vm.$refs = [];
expect(wrapper.vm.getValues()).to.eql([]);
});
});