vue-region-picker
A Vue.js Component for picking provinces, cities and districts of China.
Supports both Vue 1.x and 2.0!
Demo
Requirements
Area data
- China china-area-data
Install
$ npm install vue-region-picker china-area-data --save
Usage
html
<!-- Vue1.x --> <!-- Vue2 -->
javascript
Vue // Vue1.x el: 'body' { return province: '广东' // you can set initial value or not. city: 440100 // by code or name. district: '' }
Or
RegionPickerregion = REGION_DATA// RegionPicker.vueVersion = 1 // or 2, default 1 el: 'body' { return province: '广东' // you can set initial value or not. city: 440100 // by code or name. district: '' } components: RegionPicker
Options
name | description | Type | default Value |
---|---|---|---|
region | region data | Object | - |
vueVersion | vue version, 1 or 2 | Number | 1 |
Props
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 |
Slots
name | description |
---|---|
province | province label |
city | city label |
district | district label |
<region-picker :provincesync="address.province" :citysync="address.city" :districtsync="address.district"> <span slot="province">省份</span> <span slot="city">城市</span> <span slot="district">地区</span></region-picker>
Development
$ npm i cooking -g$ npm run dev
Testing and Building
$ npm test$ npm run dist