Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/QingWei-Li/vue-region-picker
[DEPRECATED]
https://github.com/QingWei-Li/vue-region-picker
Last synced: 2 months ago
JSON representation
[DEPRECATED]
- Host: GitHub
- URL: https://github.com/QingWei-Li/vue-region-picker
- Owner: QingWei-Li
- License: wtfpl
- Archived: true
- Created: 2015-12-23T17:10:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-13T02:42:01.000Z (over 7 years ago)
- Last Synced: 2024-04-14T02:33:31.458Z (9 months ago)
- Language: JavaScript
- Homepage: http://qingwei-li.github.io/vue-region-picker/
- Size: 253 KB
- Stars: 159
- Watchers: 8
- Forks: 34
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-region-picker - Li/vue-region-picker?style=social) - 选择中国的省份市和地区 (UI组件)
- awesome-github-vue - vue-region-picker - 选择中国的省份市和地区 (UI组件)
- awesome-github-vue - vue-region-picker - 选择中国的省份市和地区 (UI组件)
- awesome - vue-region-picker - 选择中国的省份市和地区 (UI组件)
README
## ⚠️ **DEPRECATED** ⚠️
**You Need https://github.com/ElementUI/region-picker**
This code is very 💩, I do not want to maintain it. 👋
# vue-region-picker
[](https://travis-ci.org/QingWei-Li/vue-region-picker)
[](https://www.npmjs.com/package/vue-region-picker)
> A Vue.js Component for picking provinces, cities and districts of China.
**Supports both Vue 1.x and 2.0!**
## Demo
- [Vue1.x](http://qingwei-li.github.io/vue-region-picker)
- [Vue2.0](http://qingwei-li.github.io/vue-region-picker/vue2)
## Requirements
- [Vue ^1.0.12](https://github.com/vuejs/vue)
## Area data
- China [china-area-data](https://github.com/airyland/china-area-data)
## Install
```shell
$ npm install vue-region-picker china-area-data --save
```
## Usage
html
```html
```
javascript
```javascript
import Vue from 'vue'
import RegionPicker from 'vue-region-picker'
import REGION_DATA from 'china-area-data'
Vue.use(RegionPicker, {
region: REGION_DATA
})
// Vue1.x
new Vue({
el: '#app',
data () {
return {
province: '广东', // you can set initial value or not.
city: 440100, // by code or name.
district: ''
}
}
})
```
Or
```javascript
import Vue from 'vue'
import { RegionPicker } from 'vue-region-picker'
import REGION_DATA from 'china-area-data'
RegionPicker.region = REGION_DATA
new Vue({
el: '#app',
data () {
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 | - |
## 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 |
```javascript
省份
城市
地区
```
## Development
```shell
$ npm run dev
```
## Testing and Building
```shell
$ npm test
$ npm run dist
```
## License
[WTFPL](https://github.com/QingWei-Li/vue-region-picker/blob/master/LICENSE)