效果
效果图
预览地址：https://huoguozhang.github.io/my-district/dist/
github:https://github.com/huoguozhang/my-district
介绍：
vue + element-ui (el-select+el-option)的地区选择组件
实现了：省+市+区
说明：
使用
1 引入
// es6
// 全局
// main.js
import myDistrict from 'my-district'
Vue.use(myDistrict)
// 局部
// xxx.vue
<script>
import myDistrict from 'my-district'
export default {
components: {
myDistrict
}
}
</script>
2 使用
<template>
<myDistrict
:province.sync="province"
:city.sync="city"
:area.sync="area"
></myDistrict>
</template>
- 参数说明
myDistrict Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| province | 省 | string | -- | -- |
| city | 市 | string | -- | -- |
| area | 区 | string | -- | -- |
| layoutLevels | 显示级别 1省2市3区 1 2 3 自由组合，但前面的值必须提供 | array | 1,2,3 构成的数组 | [1,2,3] |
| uint | 样式长度单位 | string | px,%等 | px |
| size | element组件的size | string | mini,small,medium | -- |
| selectWidth | select组件的宽度 | number | -- | 200 |
| spaceWidth | 两个select的间隙 | number | -- | 24 |
4 其他使用可与调取内置函数
| 名称 | 说明 | 参数用法 |
|---|---|---|
| provinceArr | 省列表 | -- |
| getCitys | 获取市列表，提供省中文名 | getCitys('浙江省') |
| getArea | 获取区县列表，提供省市中文名 | getAreas('浙江省', '杭州市') |
import { getAreas, getCitys, provinceArr } from 'my-district'
5 和ui库的form表单结合,此处用的element,你可以使用其他的ui库，校验规则由你自己定义。
<template>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item prop="district">
<myDistrict
:province.sync="ruleForm.district.province"
:city.sync="ruleForm.district.city"
:area.sync="ruleForm.district.area"
></myDistrict>
</el-form-item>
<el-button @click="submitForm('ruleForm')">提交</el-button>
</el-form>
</div>
</template>
<script>
let checkDistrict= (rule, {province, city, area}, cb) => {
if (!province) {
cb(new Error('请选择省'))
} else if (!city) {
cb(new Error('请选择市'))
} else if (!area) {
cb(new Error('请选择区'))
} else {
cb()
}
}
export default {
name: 'app',
data() {
return {
ruleForm: {
district: {
province: '',
city: '',
area: ''
}
},
rules: {
district: [
{validator: checkDistrict, trigger: 'blur'},
{validator: checkDistrict, trigger: 'change'}
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
// sconsole.log('error submit!!')
return false
}
})
}
}
}
</script>
question:
- 数据不对怎么办？
可以更改china.json文件,可以删改某项。
...
"name": "天津市",
"child": [
{
"name": "天津市",
"child": [
{"value":"和平区"},
{"value":"河东区"},
{"value":"河西区"},
{"value":"南开区"},
{"value":"河北区"},
{"value":"红桥区"},
{"value":"东丽区"},
{"value":"西青区"},
{"value":"津南区"},
{"value":"北辰区"},
{"value":"武清区"},
{"value":"宝坻区"},
{"value":"滨海新区"},
{"value":"宁河县"},
{"value":"静海县"},
{"value":"蓟州县"},
{"value":"xxx"} // 你需要增加的
]
}
...
执行npm run make:area-json
2.其他问题可以提issue
huoguozhang
3.感谢
Orionwl和CutiePanther整理的地区json文件
