mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 06:59:15 +08:00
[Improvement] translate Area component (#440)
This commit is contained in:
WyTiny
neverland
parent
f43b496333
commit
2c53828089
71
docs/demos/mock/areaEn.json
Normal file
71
docs/demos/mock/areaEn.json
Normal file
@ -0,0 +1,71 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,34 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-area :areaList="areaList" />
|
||||
<van-area :areaList="$t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area :areaList="areaList" :value="value" />
|
||||
<van-area :areaList="$t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-area :areaList="areaList" :columnsNum="2" />
|
||||
<van-area :areaList="$t('areaList')" :columnsNum="2" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../mock/area.json';
|
||||
import AreaListEn from '../mock/areaEn.json';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选中省市县',
|
||||
title3: '配置显示列'
|
||||
title3: '配置显示列',
|
||||
areaList: AreaList
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number'
|
||||
title3: 'Columns Number',
|
||||
areaList: AreaListEn
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Vue.use(Area);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
|
||||
To initailize `Area` component, `areaList` property is required. Data structure of `areaList` will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :areaList="areaList" />
|
||||
@ -20,7 +20,7 @@ Vue.use(Area);
|
||||
|
||||
#### Initial Value
|
||||
|
||||
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area :areaList="areaList" value="110101" />
|
||||
@ -28,7 +28,8 @@ Vue.use(Area);
|
||||
|
||||
#### Columns Number
|
||||
|
||||
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
|
||||
`columnsNum` property is able to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
|
||||
Set `columnsNum` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :areaList="areaList" :columnsNum="2" />
|
||||
@ -39,68 +40,63 @@ Vue.use(Area);
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 当前选中的省市区`code` | `String` | - | - |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
|
||||
| value | the `code` of selected area | `String` | - | - |
|
||||
| areaList | an object contains these properties: `province_list`, `city_list` and `county_list` | `Object` | - | - |
|
||||
| columnsNum | level of picker | `String`,`Number` | 3 | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| confirm | triggers when clicking the confirm button | an array |
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
|
||||
### Data Structure
|
||||
|
||||
#### 省市县列表Data Structure
|
||||
#### areaList
|
||||
|
||||
整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
|
||||
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.
|
||||
|
||||
每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
|
||||
Example of `AreaList`
|
||||
|
||||
`AreaList`具体格式如下：
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: '北京市',
|
||||
120000: '天津市'
|
||||
110000: 'Beijing',
|
||||
330000: 'Zhejiang Province'
|
||||
},
|
||||
city_list: {
|
||||
110100: '北京市',
|
||||
110200: '县',
|
||||
120100: '天津市',
|
||||
120200: '县'
|
||||
110100: 'Beijing City',
|
||||
330100: 'Hangzhou',
|
||||
},
|
||||
county_list: {
|
||||
110101: '东城区',
|
||||
110102: '西城区',
|
||||
110105: '朝阳区',
|
||||
110106: '丰台区'
|
||||
120101: '和平区',
|
||||
120102: '河东区',
|
||||
120103: '河西区',
|
||||
120104: '南开区',
|
||||
120105: '河北区',
|
||||
110101: 'Dongcheng District',
|
||||
110102: 'Xicheng District',
|
||||
110105: 'Chaoyang District',
|
||||
110106: 'Fengtai District'
|
||||
330105: 'Gongshu District',
|
||||
330106: 'Xihu District',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
|
||||
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
|
||||
|
||||
#### 点击完成时返回的Data Structure
|
||||
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
#### argument of callback function `confirm`
|
||||
An array contains selected area objects.
|
||||
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
|
||||
`code` - code of selected area, `name` - name of selected area
|
||||
```javascript
|
||||
[{
|
||||
code: '110000',
|
||||
name: '北京市'
|
||||
code: '330000',
|
||||
name: 'Zhejiang Province'
|
||||
}, {
|
||||
code: '110100',
|
||||
name: '北京市'
|
||||
code: '330100',
|
||||
name: 'Hangzhou'
|
||||
},{
|
||||
code: '110101',
|
||||
name: '东城区'
|
||||
code: '330105',
|
||||
name: 'Xihu District'
|
||||
}]
|
||||
```
|
||||
|
||||
@ -16,21 +16,6 @@
|
||||
import { create } from '../utils';
|
||||
import Picker from '../picker';
|
||||
|
||||
const DEFAULT_PROVINCE = {
|
||||
code: '-1',
|
||||
name: '选择省份'
|
||||
};
|
||||
|
||||
const DEFAULT_CITY = {
|
||||
code: '-1',
|
||||
name: '选择城市'
|
||||
};
|
||||
|
||||
const DEFAULT_COUNTY = {
|
||||
code: '-1',
|
||||
name: '选择地区'
|
||||
};
|
||||
|
||||
const PROVINCE_TYPE = 'provice';
|
||||
const CITY_TYPE = 'city';
|
||||
const COUNTY_TYPE = 'county';
|
||||
@ -53,6 +38,24 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
DEFAULT_PROVINCE() {
|
||||
return {
|
||||
code: '-1',
|
||||
name: this.$t('province')
|
||||
};
|
||||
},
|
||||
DEFAULT_CITY() {
|
||||
return {
|
||||
code: '-1',
|
||||
name: this.$t('city')
|
||||
};
|
||||
},
|
||||
DEFAULT_COUNTY() {
|
||||
return {
|
||||
code: '-1',
|
||||
name: this.$t('district')
|
||||
};
|
||||
},
|
||||
areaColumns() {
|
||||
const areaList = this.areaList;
|
||||
|
||||
@ -63,14 +66,14 @@ export default create({
|
||||
const { columnsNum } = this;
|
||||
|
||||
columns.push({
|
||||
values: [DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE)),
|
||||
values: [this.DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE)),
|
||||
className: 'van-area__province',
|
||||
defaultIndex: this.getAreaIndex(PROVINCE_TYPE, curValue)
|
||||
});
|
||||
|
||||
if (+columnsNum > 1) {
|
||||
columns.push({
|
||||
values: [DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, curValue.slice(0, 2))),
|
||||
values: [this.DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, curValue.slice(0, 2))),
|
||||
className: 'van-area__city',
|
||||
defaultIndex: this.getAreaIndex(CITY_TYPE, curValue)
|
||||
});
|
||||
@ -78,7 +81,7 @@ export default create({
|
||||
|
||||
if (+columnsNum > 2) {
|
||||
columns.push({
|
||||
values: [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, curValue.slice(0, 4))),
|
||||
values: [this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, curValue.slice(0, 4))),
|
||||
className: 'van-area__county',
|
||||
defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue)
|
||||
});
|
||||
@ -133,16 +136,16 @@ export default create({
|
||||
if (index === 0) {
|
||||
picker.setColumnValues(
|
||||
1,
|
||||
[DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, code.slice(0, 2)))
|
||||
[this.DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, code.slice(0, 2)))
|
||||
);
|
||||
picker.setColumnValues(
|
||||
2,
|
||||
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
||||
[this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
||||
);
|
||||
} else if (index === 1) {
|
||||
picker.setColumnValues(
|
||||
2,
|
||||
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
||||
[this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
@ -55,6 +55,11 @@ export default {
|
||||
discount: discount => `${discount * 10}% off`,
|
||||
condition: condition => `At least ${condition}`
|
||||
},
|
||||
vanArea: {
|
||||
province: 'Province',
|
||||
city: 'City',
|
||||
district: 'District'
|
||||
},
|
||||
vanAddressEdit: {
|
||||
areaTitle: 'Area',
|
||||
areaWrong: 'Please select the correct receiving area',
|
||||
|
||||
@ -58,6 +58,11 @@ export default {
|
||||
discount: discount => `${discount}折`,
|
||||
condition: (condition) => `满${condition}元可用`
|
||||
},
|
||||
vanArea: {
|
||||
province: '选择省份',
|
||||
city: '选择城市',
|
||||
district: '选择地区'
|
||||
},
|
||||
vanAddressEdit: {
|
||||
areaTitle: '收件地区',
|
||||
addressText: '收货',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user