diff --git a/docs/markdown/zh-CN/address-edit.md b/docs/markdown/zh-CN/address-edit.md
index 18b08af2d..aea451a9c 100644
--- a/docs/markdown/zh-CN/address-edit.md
+++ b/docs/markdown/zh-CN/address-edit.md
@@ -74,6 +74,9 @@ export default {
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content:表单内容 |
| delete | 点击删除按钮时触发 | content:表单内容 |
+| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key |
+| select-search | 选中搜索结果时触发 | value: 搜索结果 |
+| change-area | 修改收件地区时触发 | values: 地区信息 |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
### 数据格式
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 9d1d4d59d..3ae29d06b 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -16,7 +16,7 @@
>
{{ $t('complete') }}
-
+
@@ -101,6 +101,7 @@ export default create({
onSuggestSelect(express) {
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+ this.$emit('select-search', express);
},
isString(str) {
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 2b867c985..a201dcf7f 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -30,6 +30,7 @@
@focus="onFocus('address_detail')"
@blur="onDetailBlur"
@input="onChangeDetail"
+ @select-search="$emit('select-search', $event)"
/>
-
+ @focus="onFocus('postal_code')"
+ />
{
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());
+ }
+ });
}
}
});
diff --git a/packages/area/index.vue b/packages/area/index.vue
index 7e8585bea..65be9f607 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.vue
@@ -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() : [];
}
}
});
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
index 1ca4fe09c..14d9805f8 100644
--- a/test/unit/specs/address-edit.spec.js
+++ b/test/unit/specs/address-edit.spec.js
@@ -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);
+ });
});
diff --git a/test/unit/specs/area.spec.js b/test/unit/specs/area.spec.js
index 994be2be8..16a8fd039 100644
--- a/test/unit/specs/area.spec.js
+++ b/test/unit/specs/area.spec.js
@@ -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([]);
+ });
});