Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcc/v-distpicker
:sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.
https://github.com/jcc/v-distpicker
component distpicker vue vue-component vuejs
Last synced: 2 days ago
JSON representation
:sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.
- Host: GitHub
- URL: https://github.com/jcc/v-distpicker
- Owner: jcc
- License: mit
- Created: 2017-03-17T08:02:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T10:21:58.000Z (about 1 year ago)
- Last Synced: 2024-12-13T05:04:24.875Z (9 days ago)
- Topics: component, distpicker, vue, vue-component, vuejs
- Language: JavaScript
- Homepage: https://jcc.github.io/v-distpicker/
- Size: 2.02 MB
- Stars: 977
- Watchers: 26
- Forks: 236
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.zh-CN.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
A flexible, highly available district selector for picking provinces, cities and districts of China.
# V - Distpicker
  
[Documents and Demo ](https://jcc.github.io/v-distpicker/)
[English] | [简体中文](./README.zh_CN.md)
[CHANGELOG](./CHANGELOG.zh-CN.md)
## Installation
Vue 2
```shell
npm install v-distpicker@^1.3.3 --save
```
Vue 3
```shell
npm install v-distpicker@^2.1.0 --save
```
CDN
```html
```
## Usage
**Register component**
Registe global component:
```javascript
import VDistpicker from 'v-distpicker'
const app = createApp(App)
app.component('v-distpicker', VDistpicker)
```
Use setup-api:
```javascript
import VDistpicker from 'v-distpicker'
```
Registe component:
```javascript
import { defineComponent } from 'vue'
import VDistpicker from 'v-distpicker'
export default defineComponent({
components: { VDistpicker },
})
```
**How to use**
Basic:
```javascript
```
Default Value:
```javascript
```
Mobile:
```javascript
```
Demo:
```vue
import VDistpicker from 'v-distpicker'
let select = reactive({ province: '', city: '', area: '' })
function onSelect(data) {
console.log(data)
}
function onChange(data) {
console.log(data)
}
function selectProvince({ code, value }) {
select.province = value
console.log({ code, value })
}
function selectCity({ code, value }) {
select.city = value
console.log({ code, value })
}
function selectArea({ code, value }) {
select.area = value
console.log({ code, value })
}
```
## Props
| Name | Type | Description | Default | Sample |
| ----------------- | ------------- | ------------------------- | ---------------------------- | ----------------------------------- |
| province | String/Number | 省级编码或名称 | | '广东省'/440000/'440000' |
| city | String/Number | 市级编码或名称 | | '广州市'/440100/'440100' |
| area | String/Number | 区级编码或名称 | | '海珠区'/440105/'440105' |
| placeholder | Object | 默认显示的值 | | {province:'省',city:'市',area:'区'} |
| type | String | 区分 pc 和 mobile,默认 pc | | |
| only-province | Boolean | 只显示省级选择器 | false | |
| hide-area | Boolean | 隐藏区级 | false | |
| disabled | Boolean | 禁用 | false | |
| province-disabled | Boolean | 禁用省 | false | |
| city-disabled | Boolean | 禁用市 | false | |
| area-disabled | Boolean | 禁用区 | false | |
| province-source | Object | 省数据源 | | examples/components/data |
| city-source | Object | 市级数据源 | | |
| address-source | Object | 区级数据源 | | |
| wrapper | String | className | 'distpicker-address-wrapper' | |
| address-header | String | className(mobile) | 'address-header' | |
| address-container | String | className(mobile) | 'address-container' | |
## Event
| Name | Type | Description | Return |
| --------------- | -------- | ------------------ | ------------------------------------------------------------ |
| province | Function | 选择省时触发 | {code,value} |
| city | Function | 选择市时触发 | {code,value} |
| area | Function | 选择区时触发 | {code,value} |
| selected | Function | 选择最后一项时触发 | {province:{code,value},city:{code,value},area:{code,value} } |
| change-province | Function | 省级改变时触发 | {code,value} |
| change-city | Function | 市级改变时触发 | {code,value} |
| change-area | Function | 区级改变时触发 | {code,value} |
| change | Function | 省市区改变时触发 | {province:{code,value},city:{code,value},area:{code,value} } |
## Contributors
## Thanks
- [Distpicker](https://github.com/fengyuanchen/distpicker)
## License
The plugin is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).