From c4c93ebbf7fec1fb745b101d1e0676bb96beeadc Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 12 Jun 2018 20:30:19 +0800 Subject: [PATCH] [Improvement] Area: default option (#1272) --- .../test/__snapshots__/demo.spec.js.snap | 21 +- .../test/__snapshots__/index.spec.js.snap | 23 +- packages/address-edit/test/index.spec.js | 20 +- packages/area/demo/area.simple.js | 25 +-- packages/area/index.vue | 125 +++++------ .../area/test/__snapshots__/demo.spec.js.snap | 36 +-- .../test/__snapshots__/index.spec.js.snap | 207 ++++++++++++++++++ packages/area/test/index.spec.js | 68 ++++++ packages/vant-css/src/picker.css | 2 +- 9 files changed, 391 insertions(+), 136 deletions(-) create mode 100644 packages/area/test/__snapshots__/index.spec.js.snap create mode 100644 packages/area/test/index.spec.js diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap index 239359074..af7514e84 100644 --- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap @@ -108,8 +108,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择省份
    • -
  • 北京市
    • +
  • 北京市
  • 天津市
  • 河北省
  • 山西省
    • @@ -147,12 +146,26 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择城市
    • +
  • 北京市
    • +
  • 县
    -
  • 选择地区
    • +
  • 东城区
    • +
  • 西城区
    • +
  • 朝阳区
    • +
  • 丰台区
    • +
  • 石景山区
    • +
  • 海淀区
    • +
  • 门头沟区
    • +
  • 房山区
    • +
  • 通州区
    • +
  • 顺义区
    • +
  • 昌平区
    • +
  • 大兴区
    • +
  • 怀柔区
    • +
  • 平谷区
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap index eac958d8f..eedb81e1f 100644 --- a/packages/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap @@ -188,33 +188,20 @@ exports[`create a AddressEdit with props 1`] = `
    -
  • 选择省份
    • -
  • 北京市
    • +
  • 北京市
    • +
  • 天津市
    -
  • 选择城市
    • -
  • 北京市
    • +
  • 北京市
    • +
  • 县
    -
  • 选择地区
    • -
  • 东城区
    • +
  • 东城区
  • 西城区
    • -
  • 朝阳区
    • -
  • 丰台区
    • -
  • 石景山区
    • -
  • 海淀区
    • -
  • 门头沟区
    • -
  • 房山区
    • -
  • 通州区
    • -
  • 顺义区
    • -
  • 昌平区
    • -
  • 大兴区
    • -
  • 怀柔区
    • -
  • 平谷区
diff --git a/packages/address-edit/test/index.spec.js b/packages/address-edit/test/index.spec.js index fb39e72a0..ce7693c92 100644 --- a/packages/address-edit/test/index.spec.js +++ b/packages/address-edit/test/index.spec.js @@ -212,22 +212,22 @@ test('set/get area code', async() => { propsData: { areaList } }); - expect(wrapper.vm.getArea()).toEqual([ - { code: '-1', name: '选择省份' }, - { code: '-1', name: '选择城市' }, - { code: '-1', name: '选择地区' } - ]); - - wrapper.vm.setAreaCode('110101'); - - await later(50); - expect(wrapper.vm.data.area_code).toEqual('110101'); expect(wrapper.vm.getArea()).toEqual([ { code: '110000', name: '北京市' }, { code: '110100', name: '北京市' }, { code: '110101', name: '东城区' } ]); + wrapper.vm.setAreaCode('110102'); + + await later(50); + expect(wrapper.vm.data.area_code).toEqual('110102'); + expect(wrapper.vm.getArea()).toEqual([ + { code: '110000', name: '北京市' }, + { code: '110100', name: '北京市' }, + { code: '110102', name: '西城区' } + ]); + wrapper.vm.$refs = []; wrapper.vm.setAreaCode('110102'); expect(wrapper.vm.getArea()).toEqual([]); diff --git a/packages/area/demo/area.simple.js b/packages/area/demo/area.simple.js index 47c11d5c6..9c3b868c2 100644 --- a/packages/area/demo/area.simple.js +++ b/packages/area/demo/area.simple.js @@ -1,26 +1,21 @@ export default { 'province_list': { - '110000': '北京市' + '110000': '北京市', + '120000': '天津市' }, 'city_list': { - '110100': '北京市' + '110100': '北京市', + '110200': '县', + '120100': '天津市', + '120200': '县' }, 'county_list': { '110101': '东城区', '110102': '西城区', - '110105': '朝阳区', - '110106': '丰台区', - '110107': '石景山区', - '110108': '海淀区', - '110109': '门头沟区', - '110111': '房山区', - '110112': '通州区', - '110113': '顺义区', - '110114': '昌平区', - '110115': '大兴区', - '110116': '怀柔区', - '110117': '平谷区', '110228': '密云县', - '110229': '延庆县' + '110229': '延庆县', + '120101': '和平区', + '120102': '河东区', + '120225': '蓟县' } }; diff --git a/packages/area/index.vue b/packages/area/index.vue index df4437c8a..5e253ead5 100644 --- a/packages/area/index.vue +++ b/packages/area/index.vue @@ -28,13 +28,12 @@ export default create({ }, props: { - value: {}, + value: String, title: String, loading: Boolean, areaList: Object, itemHeight: Number, visibleItemCount: Number, - // 省市县显示列数，3-省市县，2-省市，1-省 columnsNum: { type: [String, Number], default: 3 @@ -47,99 +46,74 @@ export default create({ }, columns() { - const columns = []; - if (!this.listValid) { - return columns; + return []; } - const code = this.value || ''; - const columnsNum = +this.columnsNum; - - columns.push({ - values: this.getList('province') - }); - - if (columnsNum > 1) { - columns.push({ - values: this.getList('city', code.slice(0, 2)) - }); - } - - if (columnsNum > 2) { - columns.push({ - values: this.getList('county', code.slice(0, 4)) - }); - } - - return columns; + const code = this.getCode(); + return [ + { values: this.getList('province') }, + { values: this.getList('city', code.slice(0, 2)) }, + { values: this.getList('county', code.slice(0, 4)) } + ].slice(0, +this.columnsNum); } }, - mounted() { - this.setIndex(); - }, - watch: { - value() { - this.setIndex(); - }, - - areaList() { - this.setIndex(); + columns: { + handler() { + this.$nextTick(this.setIndex); + }, + immediate: true } }, methods: { setIndex() { - this.$nextTick(() => { - const code = this.value || ''; - const { picker } = this.$refs; - picker && picker.setIndexes([ - this.getIndex('province', code), - this.getIndex('city', code), - this.getIndex('county', code) - ]); - }); + const code = this.getCode(); + this.$refs.picker && this.$refs.picker.setIndexes([ + this.getIndex('province', code), + this.getIndex('city', code), + this.getIndex('county', code) + ]); }, - // 根据省市县类型和对应的`code`获取对应列表 + getCode() { + return ( + this.value || + (this.listValid && Object.keys(this.areaList.county_list)[0]) || + '' + ); + }, + + // get list by code getList(type, code) { let result = []; - - if (this.listValid && (type === 'province' || code)) { - const { areaList } = this; - const list = - type === 'province' - ? areaList.province_list - : type === 'city' ? areaList.city_list : areaList.county_list; - - result = Object.keys(list).map(code => ({ - code, - name: list[code] - })); - - if (type !== 'province' && code) { - result = result.filter(item => item.code.indexOf(code) === 0); - } + if (!this.listValid || (type !== 'province' && !code)) { + return result; } - result.unshift({ - code: '-1', - name: this.$t(type) - }); + const list = this.areaList[`${type}_list`]; + result = Object.keys(list).map(code => ({ + code, + name: list[code] + })); + + if (code) { + result = result.filter(item => item.code.indexOf(code) === 0); + } return result; }, - // 获取对应省市县在列表中的索引 + // get index by code getIndex(type, code) { const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6; - const areaList = this.getList(type, code.slice(0, compareNum - 2)); + const list = this.getList(type, code.slice(0, compareNum - 2)); code = code.slice(0, compareNum); - for (let i = 0; i < areaList.length; i++) { - if (areaList[i].code.slice(0, compareNum) === code) { + for (let i = 0; i < list.length; i++) { + if (list[i].code.slice(0, compareNum) === code) { return i; } } @@ -148,14 +122,15 @@ export default create({ }, onChange(picker, values, index) { - const code = values[index].code; - // 处理省变化 + let code = values[index].code; + if (index === 0) { - picker.setColumnValues(1, this.getList('city', code.slice(0, 2))); - picker.setColumnValues(2, this.getList('county', code.slice(0, 4))); - } else if (index === 1) { - picker.setColumnValues(2, this.getList('county', code.slice(0, 4))); + const cityList = this.getList('city', code.slice(0, 2)); + picker.setColumnValues(1, cityList); + code = cityList[0].code; } + + picker.setColumnValues(2, this.getList('county', code.slice(0, 4))); this.$emit('change', picker, values, index); }, diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap index c79d2a297..8b9f956ce 100644 --- a/packages/area/test/__snapshots__/demo.spec.js.snap +++ b/packages/area/test/__snapshots__/demo.spec.js.snap @@ -13,8 +13,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择省份
    • -
  • 北京市
    • +
  • 北京市
  • 天津市
  • 河北省
  • 山西省
    • @@ -52,12 +51,26 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择城市
    • +
  • 北京市
    • +
  • 县
    -
  • 选择地区
    • +
  • 东城区
    • +
  • 西城区
    • +
  • 朝阳区
    • +
  • 丰台区
    • +
  • 石景山区
    • +
  • 海淀区
    • +
  • 门头沟区
    • +
  • 房山区
    • +
  • 通州区
    • +
  • 顺义区
    • +
  • 昌平区
    • +
  • 大兴区
    • +
  • 怀柔区
    • +
  • 平谷区
@@ -75,8 +88,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择省份
    • -
  • 北京市
    • +
  • 北京市
  • 天津市
  • 河北省
  • 山西省
    • @@ -114,8 +126,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择城市
    • -
  • 杭州市
    • +
  • 杭州市
  • 宁波市
  • 温州市
  • 嘉兴市
    • @@ -130,8 +141,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 选择地区
    • -
  • 鹿城区
    • +
  • 鹿城区
  • 龙湾区
  • 瓯海区
  • 洞头区
    • @@ -159,8 +169,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 选择省份
      • -
    • 北京市
      • +
    • 北京市
    • 天津市
    • 河北省
    • 山西省
      • @@ -198,7 +207,8 @@ exports[`renders demo correctly 1`] = `
      -
    • 选择城市
      • +
    • 北京市
      • +
    • 县
    diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..a0792d568 --- /dev/null +++ b/packages/area/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,207 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`change option 1`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 北京市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 东城区
      • +
    • 西城区
      • +
    +
    +
    +
    +
    +`; + +exports[`change option 2`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 天津市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 和平区
      • +
    • 河东区
      • +
    +
    +
    +
    +
    +`; + +exports[`change option 3`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 天津市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 和平区
      • +
    • 河东区
      • +
    +
    +
    +
    +
    +`; + +exports[`watch areaList & code 1`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
    +
    +`; + +exports[`watch areaList & code 2`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 北京市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 东城区
      • +
    • 西城区
      • +
    +
    +
    +
    +
    +`; + +exports[`watch areaList & code 3`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 北京市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 东城区
      • +
    • 西城区
      • +
    +
    +
    +
    +
    +`; + +exports[`watch areaList & code 4`] = ` +
    +
    +
    取消
    + +
    确认
    +
    + +
    +
    +
      +
    • 北京市
      • +
    • 天津市
      • +
    +
    +
    +
      +
    • 北京市
      • +
    • 县
      • +
    +
    +
    +
      +
    • 东城区
      • +
    • 西城区
      • +
    +
    +
    +
    +
    +`; diff --git a/packages/area/test/index.spec.js b/packages/area/test/index.spec.js new file mode 100644 index 000000000..e78302280 --- /dev/null +++ b/packages/area/test/index.spec.js @@ -0,0 +1,68 @@ +import Area from '..'; +import { mount } from '@vue/test-utils'; +import areaList from '../demo/area.simple'; +import { later, triggerDrag } from '../../../test/utils'; + +const firstOption = [ + { code: '110000', name: '北京市' }, + { code: '110100', name: '北京市' }, + { code: '110101', name: '东城区' } +]; + +test('confirm & cancel event', () => { + const wrapper = mount(Area, { + propsData: { + areaList + } + }); + + wrapper.find('.van-picker__confirm').trigger('click'); + wrapper.find('.van-picker__cancel').trigger('click'); + + expect(wrapper.emitted('confirm')[0][0]).toEqual(firstOption); + expect(wrapper.emitted('cancel')[0][0]).toEqual(firstOption); +}); + +test('watch areaList & code', async() => { + const wrapper = mount(Area); + expect(wrapper).toMatchSnapshot(); + wrapper.setProps({ areaList }); + expect(wrapper).toMatchSnapshot(); + wrapper.setProps({ value: '110117' }); + + await later(); + expect(wrapper).toMatchSnapshot(); + + wrapper.setProps({ + value: '', + areaList: null + }); + expect(wrapper).toMatchSnapshot(); +}); + +test('change option', () => { + const wrapper = mount(Area, { + propsData: { + areaList + } + }); + + const columns = wrapper.findAll('.van-picker-column'); + expect(wrapper).toMatchSnapshot(); + triggerDrag(columns.at(0), 0, -100); + expect(wrapper).toMatchSnapshot(); + triggerDrag(columns.at(2), 0, -100); + expect(wrapper).toMatchSnapshot(); +}); + +test('getValues method', () => { + const wrapper = mount(Area, { + propsData: { + areaList + }, + created() { + expect(this.getValues()).toEqual([]); + } + }); + expect(wrapper.vm.getValues()).toEqual(firstOption); +}); diff --git a/packages/vant-css/src/picker.css b/packages/vant-css/src/picker.css index 2067441c8..7b15e0fe4 100644 --- a/packages/vant-css/src/picker.css +++ b/packages/vant-css/src/picker.css @@ -62,7 +62,7 @@ &-column { flex: 1; overflow: hidden; - font-size: 17px; + font-size: 16px; text-align: center; &__item {