mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Area: default option (#1272)
This commit is contained in:
neverland
GitHub
parent
108c7c1eb1
commit
c4c93ebbf7
@ -108,8 +108,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<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>
|
||||
@ -147,12 +146,26 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
|
||||
@ -188,33 +188,20 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<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>
|
||||
<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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
|
||||
@ -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([]);
|
||||
|
||||
@ -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': '蓟县'
|
||||
}
|
||||
};
|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
|
||||
@ -13,8 +13,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<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>
|
||||
@ -52,12 +51,26 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
@ -75,8 +88,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<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>
|
||||
@ -114,8 +126,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 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>
|
||||
@ -130,8 +141,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 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>
|
||||
@ -159,8 +169,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<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>
|
||||
@ -198,7 +207,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 van-picker-column__item--selected">北京市</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>
|
||||
|
||||
207
packages/area/test/__snapshots__/index.spec.js.snap
Normal file
207
packages/area/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,207 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`change option 1`] = `
|
||||
<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="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="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="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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change option 2`] = `
|
||||
<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="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="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="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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change option 3`] = `
|
||||
<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="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="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="line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">河东区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<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="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="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="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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<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="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="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="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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 4`] = `
|
||||
<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="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="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="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-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
68
packages/area/test/index.spec.js
Normal file
68
packages/area/test/index.spec.js
Normal file
@ -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);
|
||||
});
|
||||
@ -62,7 +62,7 @@
|
||||
&-column {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__item {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user