[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,71 @@
|
||||
export default {
|
||||
province_list: {
|
||||
110000: 'Beijing',
|
||||
330000: 'Zhejiang',
|
||||
810000: 'Hong Kong'
|
||||
},
|
||||
city_list: {
|
||||
110100: 'Beijing City',
|
||||
330100: 'Hangzhou',
|
||||
330200: 'Ningbo',
|
||||
330300: 'Wenzhou',
|
||||
330400: 'Jiaxin',
|
||||
331100: 'Lishui',
|
||||
810100: 'Hong Kong Island',
|
||||
810200: 'Kowloon',
|
||||
810300: 'New Territories'
|
||||
},
|
||||
county_list: {
|
||||
110101: 'Dongcheng',
|
||||
110102: 'Xicheng',
|
||||
110105: 'Chaoyang',
|
||||
110106: 'Fengtai',
|
||||
110108: 'Haidian',
|
||||
110111: 'Fangshan',
|
||||
110112: 'Tongzhou',
|
||||
110113: 'Shunyi',
|
||||
110114: 'Changping',
|
||||
110115: 'Daxing',
|
||||
330105: 'Gongshu',
|
||||
330106: 'Xihu',
|
||||
330108: 'Binjiang',
|
||||
330109: 'Xiaoshan',
|
||||
330110: 'Yuhang',
|
||||
330111: 'Fuyang',
|
||||
330127: 'Chunan',
|
||||
330182: 'Jiande',
|
||||
330185: 'Linan',
|
||||
330206: 'Beilun',
|
||||
330211: 'Zhenhai',
|
||||
330225: 'Xiangshan',
|
||||
330226: 'Ninghai',
|
||||
330281: 'Yuyao',
|
||||
330282: 'Cixi',
|
||||
330327: 'Cangnan',
|
||||
330328: 'Wencheng',
|
||||
330329: 'Shuntai',
|
||||
330381: 'Ruian',
|
||||
330382: 'Yueqing',
|
||||
330402: 'Nanhu',
|
||||
330421: 'Jiashan',
|
||||
330424: 'Haiyan',
|
||||
330481: 'Haining',
|
||||
330482: 'Pinghu',
|
||||
330483: 'Tongxiang',
|
||||
331102: 'Liandu District',
|
||||
331121: 'Qingtian County',
|
||||
331125: 'Yunhe County',
|
||||
331181: 'Longquan County',
|
||||
810101: 'Central',
|
||||
810102: 'Wan Chai',
|
||||
810202: 'Mong Kok',
|
||||
810203: 'Sham Shui Po',
|
||||
810204: 'Chuk Un',
|
||||
810205: 'Kwun Tong',
|
||||
810303: 'Sha Tin',
|
||||
810305: 'Yuen Long',
|
||||
810306: 'Tuen Mun',
|
||||
810307: 'Tsuen Wan',
|
||||
810309: 'Lantau Island'
|
||||
}
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
province_list: {
|
||||
110000: '北京市',
|
||||
120000: '天津市'
|
||||
},
|
||||
city_list: {
|
||||
110100: '北京市',
|
||||
110200: '县',
|
||||
120100: '天津市',
|
||||
120200: '县'
|
||||
},
|
||||
county_list: {
|
||||
110101: '东城区',
|
||||
110102: '西城区',
|
||||
110228: '密云县',
|
||||
110229: '延庆县',
|
||||
120101: '和平区',
|
||||
120102: '河东区',
|
||||
120225: '蓟县'
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-area :area-list="$t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
:value="value"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
:columns-num="2"
|
||||
:title="$t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from './area';
|
||||
import AreaListEn from './area-en';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选中省市区',
|
||||
title3: '配置显示列',
|
||||
areaList: AreaList
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number',
|
||||
areaList: AreaListEn
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '330302'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,121 @@
|
||||
# Area
|
||||
|
||||
### Intro
|
||||
|
||||
The Picker component is usually used with [Popup](#/en-US/popup) Component.
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Area } from 'vant';
|
||||
|
||||
Vue.use(Area);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
```
|
||||
|
||||
### Initial Value
|
||||
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### Columns Number
|
||||
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
|
||||
Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| value | the `code` of selected area | `String` | - |
|
||||
| title | Toolbar title | `String` | - |
|
||||
| area-list | Area data | `Object` | - |
|
||||
| columns-num | level of picker | `String | Number` | `3` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
| confirm-button-text | Text of confirm button | `String` | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | `String` | `Cancel` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| confirm | triggers when clicking the confirm button | an array |
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
| change | Triggered when current option changed | Picker instance, current values，column index |
|
||||
|
||||
### Methods
|
||||
|
||||
Use ref to get area instance and call instance methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|------|------|------|------|
|
||||
| reset | code: string | - | Reset all options by code |
|
||||
|
||||
### areaList Data Structure
|
||||
|
||||
An object contains three properties: `province_list`, `city_list` and `county_list`.
|
||||
Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
|
||||
|
||||
Example of `AreaList`
|
||||
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: 'Beijing',
|
||||
330000: 'Zhejiang Province'
|
||||
},
|
||||
city_list: {
|
||||
110100: 'Beijing City',
|
||||
330100: 'Hangzhou',
|
||||
},
|
||||
county_list: {
|
||||
110101: 'Dongcheng District',
|
||||
110102: 'Xicheng District',
|
||||
110105: 'Chaoyang District',
|
||||
110106: 'Fengtai District'
|
||||
330105: 'Gongshu District',
|
||||
330106: 'Xihu District',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)
|
||||
|
||||
### argument of callback function confirm
|
||||
|
||||
An array contains selected area objects.
|
||||
|
||||
`code` - code of selected area, `name` - name of selected area
|
||||
```javascript
|
||||
[{
|
||||
code: '330000',
|
||||
name: 'Zhejiang Province'
|
||||
}, {
|
||||
code: '330100',
|
||||
name: 'Hangzhou'
|
||||
},{
|
||||
code: '330105',
|
||||
name: 'Xihu District'
|
||||
}]
|
||||
```
|
||||
@@ -0,0 +1,209 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import Picker from '../picker';
|
||||
import { pickerProps } from '../picker/shared';
|
||||
|
||||
const [createComponent, bem] = createNamespace('area');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
...pickerProps,
|
||||
value: String,
|
||||
areaList: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
columnsNum: {
|
||||
type: [String, Number],
|
||||
default: 3
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
code: this.value,
|
||||
columns: [{ values: [] }, { values: [] }, { values: [] }]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
province() {
|
||||
return this.areaList.province_list || {};
|
||||
},
|
||||
|
||||
city() {
|
||||
return this.areaList.city_list || {};
|
||||
},
|
||||
|
||||
county() {
|
||||
return this.areaList.county_list || {};
|
||||
},
|
||||
|
||||
displayColumns() {
|
||||
return this.columns.slice(0, +this.columnsNum);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.code = this.value;
|
||||
this.setValues();
|
||||
},
|
||||
|
||||
areaList: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.setValues();
|
||||
}
|
||||
},
|
||||
|
||||
columnsNum() {
|
||||
this.$nextTick(() => {
|
||||
this.setValues();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setValues();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// get list by code
|
||||
getList(type, code) {
|
||||
let result = [];
|
||||
if (type !== 'province' && !code) {
|
||||
return result;
|
||||
}
|
||||
|
||||
const list = this[type];
|
||||
result = Object.keys(list).map(listCode => ({
|
||||
code: listCode,
|
||||
name: list[listCode]
|
||||
}));
|
||||
|
||||
if (code) {
|
||||
// oversea code
|
||||
if (code[0] === '9' && type === 'city') {
|
||||
code = '9';
|
||||
}
|
||||
|
||||
result = result.filter(item => item.code.indexOf(code) === 0);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
// get index by code
|
||||
getIndex(type, code) {
|
||||
let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
|
||||
const list = this.getList(type, code.slice(0, compareNum - 2));
|
||||
|
||||
// oversea code
|
||||
if (code[0] === '9' && type === 'province') {
|
||||
compareNum = 1;
|
||||
}
|
||||
|
||||
code = code.slice(0, compareNum);
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].code.slice(0, compareNum) === code) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
|
||||
onChange(picker, values, index) {
|
||||
this.code = values[index].code;
|
||||
this.setValues();
|
||||
this.$emit('change', picker, picker.getValues(), index);
|
||||
},
|
||||
|
||||
setValues() {
|
||||
let code = this.code || Object.keys(this.county)[0] || '';
|
||||
const { picker } = this.$refs;
|
||||
const province = this.getList('province');
|
||||
const city = this.getList('city', code.slice(0, 2));
|
||||
|
||||
if (!picker) {
|
||||
return;
|
||||
}
|
||||
|
||||
picker.setColumnValues(0, province);
|
||||
picker.setColumnValues(1, city);
|
||||
|
||||
if (city.length && code.slice(2, 4) === '00') {
|
||||
[{ code }] = city;
|
||||
}
|
||||
|
||||
picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
|
||||
picker.setIndexes([
|
||||
this.getIndex('province', code),
|
||||
this.getIndex('city', code),
|
||||
this.getIndex('county', code)
|
||||
]);
|
||||
},
|
||||
|
||||
getValues() {
|
||||
return this.$refs.picker ? this.$refs.picker.getValues().filter(value => !!value) : [];
|
||||
},
|
||||
|
||||
getArea() {
|
||||
const values = this.getValues();
|
||||
const area = {
|
||||
code: '',
|
||||
country: '',
|
||||
province: '',
|
||||
city: '',
|
||||
county: ''
|
||||
};
|
||||
|
||||
if (!values.length) {
|
||||
return area;
|
||||
}
|
||||
|
||||
const names = values.map(item => item.name);
|
||||
|
||||
area.code = values[values.length - 1].code;
|
||||
if (area.code[0] === '9') {
|
||||
area.country = names[1] || '';
|
||||
area.province = names[2] || '';
|
||||
} else {
|
||||
area.province = names[0] || '';
|
||||
area.city = names[1] || '';
|
||||
area.county = names[2] || '';
|
||||
}
|
||||
|
||||
return area;
|
||||
},
|
||||
|
||||
reset(code) {
|
||||
this.code = code || '';
|
||||
this.setValues();
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const on = {
|
||||
...this.$listeners,
|
||||
change: this.onChange
|
||||
};
|
||||
|
||||
return (
|
||||
<Picker
|
||||
ref="picker"
|
||||
class={bem()}
|
||||
showToolbar
|
||||
valueKey="name"
|
||||
title={this.title}
|
||||
loading={this.loading}
|
||||
columns={this.displayColumns}
|
||||
itemHeight={this.itemHeight}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
cancelButtonText={this.cancelButtonText}
|
||||
confirmButtonText={this.confirmButtonText}
|
||||
{...{ on }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,226 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">鹿城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div class="van-ellipsis van-picker__title">标题</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,291 @@
|
||||
// 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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">蓟县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></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 role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,124 @@
|
||||
import Area from '..';
|
||||
import areaList from '../demo/area.simple';
|
||||
import { mount, later, triggerDrag } from '../../../test/utils';
|
||||
|
||||
const firstOption = [
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' }
|
||||
];
|
||||
|
||||
const secondOption = [
|
||||
{ code: '120000', name: '天津市' },
|
||||
{ code: '120100', name: '天津市' },
|
||||
{ code: '120101', name: '和平区' }
|
||||
];
|
||||
|
||||
test('confirm & cancel event', async () => {
|
||||
const onConfirm = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
},
|
||||
listeners: {
|
||||
confirm: onConfirm,
|
||||
cancel: onCancel
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
wrapper.find('.van-picker__cancel').trigger('click');
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
|
||||
expect(onCancel).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
|
||||
});
|
||||
|
||||
test('watch areaList & code', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper.setProps({ value: '110117' });
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({
|
||||
value: ''
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('change option', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
},
|
||||
listeners: {
|
||||
change: onChange
|
||||
}
|
||||
});
|
||||
|
||||
const columns = wrapper.findAll('.van-picker-column');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
triggerDrag(columns.at(0), 0, -100);
|
||||
columns.at(0).find('ul').trigger('transitionend');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
triggerDrag(columns.at(2), 0, -100);
|
||||
columns.at(2).find('ul').trigger('transitionend');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
expect(onChange.mock.calls[0][1]).toEqual(secondOption);
|
||||
});
|
||||
|
||||
test('getValues method', () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList
|
||||
},
|
||||
created() {
|
||||
expect(this.getValues()).toEqual([]);
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getValues()).toEqual(firstOption);
|
||||
});
|
||||
|
||||
test('reset method', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList,
|
||||
value: '120225'
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper.vm.reset();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('columns-num prop', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList,
|
||||
columnsNum: 3
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
columnsNum: 2
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
# Area 省市区选择
|
||||
|
||||
### 介绍
|
||||
|
||||
省市取选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { Area } from 'vant';
|
||||
|
||||
Vue.use(Area);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
```
|
||||
|
||||
### 选中省市区
|
||||
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### 配置显示列
|
||||
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="标题" />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| value | 当前选中的省市区`code` | `String` | - | - |
|
||||
| title | 顶部栏标题 | `String` | - | - |
|
||||
| area-list | 省市区数据，格式见下方 | `Object` | - | - |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | `String | Number` | `3` | - |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` | - |
|
||||
| item-height | 选项高度 | `Number` | `44` | - |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` | 1.5.3 |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` | 1.5.3 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 area 实例并调用实例方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|------|------|------|------|
|
||||
| reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 |
|
||||
|
||||
### 省市区列表数据格式
|
||||
|
||||
整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。
|
||||
|
||||
每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 `11`，以零补足 6 位，为 `110000`。
|
||||
|
||||
`AreaList`具体格式如下：
|
||||
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: '北京市',
|
||||
120000: '天津市'
|
||||
},
|
||||
city_list: {
|
||||
110100: '北京市',
|
||||
110200: '县',
|
||||
120100: '天津市',
|
||||
120200: '县'
|
||||
},
|
||||
county_list: {
|
||||
110101: '东城区',
|
||||
110102: '西城区',
|
||||
110105: '朝阳区',
|
||||
110106: '丰台区'
|
||||
120101: '和平区',
|
||||
120102: '河东区',
|
||||
120103: '河西区',
|
||||
120104: '南开区',
|
||||
120105: '河北区',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)
|
||||
|
||||
### 点击完成时返回的数据格式
|
||||
|
||||
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
|
||||
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
code: '110000',
|
||||
name: '北京市'
|
||||
},
|
||||
{
|
||||
code: '110100',
|
||||
name: '北京市'
|
||||
},
|
||||
{
|
||||
code: '110101',
|
||||
name: '东城区'
|
||||
}
|
||||
];
|
||||
```
|
||||
Reference in New Issue
Block a user