A Vue.js Component for picking provinces, cities and districts of China.
Supports both Vue 1.x and 2.0!
- China china-area-data
$ npm install vue-region-picker china-area-data --savehtml
<body>
<!-- Vue1.x -->
<region-picker
:province.sync="province"
:city.sync="city"
:district.sync="district">
</region-picker>
<!-- Vue2 -->
<region-picker
:province="province"
:city="city"
:district="district"
@onchange="change">
</region-picker>
</body>javascript
import Vue from 'vue'
import RegionPicker from 'vue-region-picker'
import REGION_DATA from 'china-area-data'
Vue.use(RegionPicker, {
region: REGION_DATA,
vueVersion: 1 // or 2, default 1
})
// Vue1.x
new Vue({
el: 'body',
data () {
return {
province: '广东', // you can set initial value or not.
city: 440100, // by code or name.
district: ''
}
}
})Or
import Vue from 'vue'
import { RegionPicker } from 'vue-region-picker'
import REGION_DATA from 'china-area-data'
RegionPicker.region = REGION_DATA
// RegionPicker.vueVersion = 1 // or 2, default 1
new Vue({
el: 'body',
data () {
return {
province: '广东', // you can set initial value or not.
city: 440100, // by code or name.
district: ''
}
},
components: { RegionPicker }
})| name | description | Type | default Value |
|---|---|---|---|
| region | region data | Object | - |
| vueVersion | vue version, 1 or 2 | Number | 1 |
| name | description | Type | default Value |
|---|---|---|---|
| province | Bind province. You can set the initial value or not. Set the initial value by (number)code or (string)name. |
Number, String | |
| city | Bind city. You can set the initial value or not. Set the initial value by (number)code or (string)name. |
Number, String | |
| district | Bind district. You can set the initial value or not. Set the initial value by (number)code or (string)name. |
Number, String | |
| placeholder | Placeholder | Object | { province: '请选择', city: '请选择', district: '请选择'} |
| auto | If empty option will automatically hide. | Boolean | false |
| required | Required if the option is not empty. | Boolean | false |
| completed | Allow the return value is complete, it contains an array of code(number) and name(string). e.g. { "district": [ 440105, "海珠区" ], "city": [ 440100, "广州市" ], "province": [ 440000, "广东省" ] } |
Boolean | false |
| disabled | disabled | Boolean | false |
| two-select | If true, display only province and city |
Boolean | false |
| onchange | selected callback | Function |
| name | description |
|---|---|
| province | province label |
| city | city label |
| district | district label |
<region-picker
:province.sync="address.province"
:city.sync="address.city"
:district.sync="address.district">
<span slot="province">省份</span>
<span slot="city">城市</span>
<span slot="district">地区</span>
</region-picker>$ npm i cooking -g
$ npm run dev$ npm test
$ npm run dist
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent