blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] translate Area component (#440)

Browse Source
This commit is contained in:
WyTiny 2017-12-15 19:51:23 +08:00 committed by neverland
parent f43b496333
commit 2c53828089
6 changed files with 146 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
docs/demos/mock/areaEn.json Normal file
View 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"
}
}

13
docs/demos/views/area.vue
View File

@ -1,31 +1,34 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-area :areaList="areaList" /> <van-area :areaList="$t('areaList')" />
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-area :areaList="areaList" :value="value" /> <van-area :areaList="$t('areaList')" :value="value" />
</demo-block> </demo-block>
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-area :areaList="areaList" :columnsNum="2" /> <van-area :areaList="$t('areaList')" :columnsNum="2" />
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
<script> <script>
import AreaList from '../mock/area.json'; import AreaList from '../mock/area.json';
import AreaListEn from '../mock/areaEn.json';
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title2: '选中省市县', title2: '选中省市县',
title3: '配置显示列' title3: '配置显示列',
areaList: AreaList
}, },
'en-US': { 'en-US': {
title2: 'Initial Value', title2: 'Initial Value',
title3: 'Columns Number' title3: 'Columns Number',
areaList: AreaListEn
} }
}, },

70
docs/markdown/en-US/area.md
View File

@ -12,7 +12,7 @@ Vue.use(Area);
#### Basic Usage #### 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 ```html
<van-area :areaList="areaList" /> <van-area :areaList="areaList" />
@ -20,7 +20,7 @@ Vue.use(Area);
#### Initial Value #### Initial Value
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。 To have a selected value，simply pass the `code` of target area to `value` property.
```html ```html
<van-area :areaList="areaList" value="110101" /> <van-area :areaList="areaList" value="110101" />
@ -28,7 +28,8 @@ Vue.use(Area);
#### Columns Number #### 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 ```html
<van-area :areaList="areaList" :columnsNum="2" /> <van-area :areaList="areaList" :columnsNum="2" />
@ -39,68 +40,63 @@ Vue.use(Area);
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 当前选中的省市区`code` | `String` | - | - | | value | the `code` of selected area | `String` | - | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - | | areaList | an object contains these properties: `province_list`, `city_list` and `county_list` | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - | | columnsNum | level of picker | `String`,`Number` | 3 | - |
### Event ### Event
| Event | Description | Arguments | | Event | Description | Arguments |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 | | confirm | triggers when clicking the confirm button | an array |
| cancel | 点击取消按钮时 | - | | cancel | triggers when clicking the cancel button | - |
### Data Structure ### 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 ```javascript
{ {
province_list: { province_list: {
110000: '北京市', 110000: 'Beijing',
120000: '天津市' 330000: 'Zhejiang Province'
}, },
city_list: { city_list: {
110100: '北京市', 110100: 'Beijing City',
110200: '县', 330100: 'Hangzhou',
120100: '天津市',
120200: '县'
}, },
county_list: { county_list: {
110101: '东城区', 110101: 'Dongcheng District',
110102: '西城区', 110102: 'Xicheng District',
110105: '朝阳区', 110105: 'Chaoyang District',
110106: '丰台区' 110106: 'Fengtai District'
120101: '和平区', 330105: 'Gongshu District',
120102: '河东区', 330106: 'Xihu District',
120103: '河西区',
120104: '南开区',
120105: '河北区',
// .... // ....
} }
} }
``` ```
完整数据见 [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 #### argument of callback function `confirm`
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。 An array contains selected area objects.
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称 `code` - code of selected area, `name` - name of selected area
```javascript ```javascript
[{ [{
code: '110000', code: '330000',
name: '北京市' name: 'Zhejiang Province'
}, { }, {
code: '110100', code: '330100',
name: '北京市' name: 'Hangzhou'
},{ },{
code: '110101', code: '330105',
name: '东城区' name: 'Xihu District'
}] }]
``` ```

45
packages/area/index.vue
View File

@ -16,21 +16,6 @@
import { create } from '../utils'; import { create } from '../utils';
import Picker from '../picker'; 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 PROVINCE_TYPE = 'provice';
const CITY_TYPE = 'city'; const CITY_TYPE = 'city';
const COUNTY_TYPE = 'county'; const COUNTY_TYPE = 'county';
@ -53,6 +38,24 @@ export default create({
}, },
computed: { 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() { areaColumns() {
const areaList = this.areaList; const areaList = this.areaList;
@ -63,14 +66,14 @@ export default create({
const { columnsNum } = this; const { columnsNum } = this;
columns.push({ columns.push({
values: [DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE)), values: [this.DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE)),
className: 'van-area__province', className: 'van-area__province',
defaultIndex: this.getAreaIndex(PROVINCE_TYPE, curValue) defaultIndex: this.getAreaIndex(PROVINCE_TYPE, curValue)
}); });
if (+columnsNum > 1) { if (+columnsNum > 1) {
columns.push({ 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', className: 'van-area__city',
defaultIndex: this.getAreaIndex(CITY_TYPE, curValue) defaultIndex: this.getAreaIndex(CITY_TYPE, curValue)
}); });
@ -78,7 +81,7 @@ export default create({
if (+columnsNum > 2) { if (+columnsNum > 2) {
columns.push({ 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', className: 'van-area__county',
defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue) defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue)
}); });
@ -133,16 +136,16 @@ export default create({
if (index === 0) { if (index === 0) {
picker.setColumnValues( picker.setColumnValues(
1, 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( picker.setColumnValues(
2, 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) { } else if (index === 1) {
picker.setColumnValues( picker.setColumnValues(
2, 2,
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4))) [this.DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
); );
} }
}, },

5
packages/locale/lang/en-US.js
View File

@ -55,6 +55,11 @@ export default {
discount: discount => `${discount * 10}% off`, discount: discount => `${discount * 10}% off`,
condition: condition => `At least ${condition}` condition: condition => `At least ${condition}`
}, },
vanArea: {
province: 'Province',
city: 'City',
district: 'District'
},
vanAddressEdit: { vanAddressEdit: {
areaTitle: 'Area', areaTitle: 'Area',
areaWrong: 'Please select the correct receiving area', areaWrong: 'Please select the correct receiving area',

5
packages/locale/lang/zh-CN.js
View File

@ -58,6 +58,11 @@ export default {
discount: discount => `${discount}折`, discount: discount => `${discount}折`,
condition: (condition) => `满${condition}元可用` condition: (condition) => `满${condition}元可用`
}, },
vanArea: {
province: '选择省份',
city: '选择城市',
district: '选择地区'
},
vanAddressEdit: { vanAddressEdit: {
areaTitle: '收件地区', areaTitle: '收件地区',
addressText: '收货', addressText: '收货',