Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/msidolphin/element-ui-area
An area component bases on Vue and ElementUI
https://github.com/msidolphin/element-ui-area
china-area element-ui vuecomponent
Last synced: about 1 month ago
JSON representation
An area component bases on Vue and ElementUI
- Host: GitHub
- URL: https://github.com/msidolphin/element-ui-area
- Owner: msidolphin
- License: mit
- Created: 2019-04-21T15:17:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-09T07:52:39.000Z (over 4 years ago)
- Last Synced: 2024-12-09T03:39:28.524Z (about 1 month ago)
- Topics: china-area, element-ui, vuecomponent
- Language: JavaScript
- Size: 102 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# element-ui-area
> 基于Vue和ElementUI的中国行政区划选择器
## 安装
```bash
npm install element-ui-area -S
```
## 使用方式
> 项目依赖于[Element-UI](https://github.com/ElemeFE/element)，您需要先进行引入
### 引入
```javascript
import AreaComponent from 'element-ui-area'
Vue.use(AreaComponent, {})
// or
import {Cascader, Select} from 'element-ui-area'
Vue.use(Cascader, {})
Vue.use(Select, {})
```
#### 配置项
| 属性 | 类型 | 说明 | 默认值 |
| :------ | :------ | :------ | --- |
| dataSource | Object | 数据源 | - |
### 使用
#### Cascader
```vue
export default {
data () {
return {
value: []
}
},
methods: {
onChange (val, text) {
console.log(val)
console.log(text) // 地区中文
}
}
}
```
#### Select
```vue
export default {
data () {
return {
value: [],
value1: [],
value2: []
}
}
}
```
## 配置项
### area-cascader
| 属性 | 类型 | 说明 | 默认值 |
| :------ | :------ | :------ | --- |
| value | String | 绑定值 | [ ] |
| level | Number | 层级，由于数据原因，目前最多只支持三级 | 3 |
| disabled | Boolean | 是否禁用 | false |
| size | String | 尺寸 | small |
| noMatchText | String | 无匹配项时展现的文字 | 无匹配数据 |
| noDataText | String | 无数据时展现的文字 | 无数据 |
| clearable | Boolean | 是否支持清空 | true |
| placeholder | String | 占位符 | 请选择地区 |
| immediate | Boolean | 是否立即触发change事件 | true |
| dataSource | Object | 数据源 | 6位短编码行政区划 |
### area-select
| 属性 | 类型 | 说明 | 默认值 |
| :------ | :------ | :------ | --- |
| value | String | 绑定值 | [ ] |
| level | Number | 层级，由于数据原因，目前最多只支持三级 | 3 |
| disabled | Boolean | 是否禁用 | false |
| size | String | 尺寸 | small |
| gutter | number | 间距 | 10 |
| noMatchText | String | 无匹配项时展现的文字 | 无匹配数据 |
| noDataText | String | 无数据时展现的文字 | 无数据 |
| clearable | Boolean | 是否支持清空 | true |
| placeholder | Array | 占位符 | ['请选择省', '请选择市', '请选择区县', '请选择街道'] |
|filterable | Boolean | 是否支持搜索 | false |
| immediate | Boolean | 是否立即触发change事件 | true |
| dataSource | Object | 数据源 | 6位短编码行政区划 |
## 事件
| 名称 | 说明 | 参数 |
| :------ | :------ | :------ |
| change | 选中值改变事件，初始化时会触发一次 | 改变后的值, 中文名称 |
| blur | 失去焦点 | 事件对象 |
| focus | 聚焦 | 事件对象|
## 数据源格式范例
```json
{
"86": {
"110000": "北京市",
},
"110000": {
"110100": "市辖区"
},
"110100": {
"110101": "东城区",
"110102": "西城区",
"110105": "朝阳区",
"110106": "丰台区",
"110107": "石景山区",
"110108": "海淀区",
"110109": "门头沟区",
"110111": "房山区",
"110112": "通州区",
"110113": "顺义区",
"110114": "昌平区",
"110115": "大兴区",
"110116": "怀柔区",
"110117": "平谷区",
"110118": "密云区",
"110119": "延庆区"
}
}
```