1.0.9 • Published 5 years ago
mozi-iview-area v1.0.9
mozi-iview-area
由于业务需要,更改重新发布 一款基于Vue框架和iView-UI组件库开发的城市级联组件,数据包含中国的省(直辖市)、市、县区和乡镇街,数据来源area-data
mozi-iview-area有两种形式的级联:
- 下拉菜单(基于iview的Select组件)
- 级联选择(基于iview的Cascader组件)
install 安装
npm install mozi-iview-area --save
use 使用
在main.js中写入下面的代码
import iviewArea from 'mozi-iview-area';
import Vue from 'vue';
Vue.use(iviewArea);
接下来,你就可以在页面中使用mozi-iview-area了
<template>
<al-selector v-model="res_s"/>
<al-cascader v-model="res_c"/>
</template>
<script>
export default {
data () {
return {
res_s: [],
res_c: []
}
}
}
</script>
config 配置
al-selector:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 用于存放结果的数组,建议使用v-model来做双向绑定 | Array | 无 |
v-model | 用于存放结果的数组,选择了数据后会自动更新,可传入默认显示的数据,详见表格下补充 | Array | 无 |
gutter | 设置各级别选择器之间的距离,单位px | String | Number | 10 |
level | 要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级 | String | Number | 3 |
data-type | 返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式请看表格下面的补充说明 | String | all |
searchable | 是否可搜索,添加该属性则点击选择器后可输入名称搜索 | Boolean | false |
size | 选择器尺寸,该属性同iview组件select的size属性,可选值为small,large,default | String | default |
auto | 是否在选择一级之后自动选择之后所有等级的选择器(自动选中为列表第一项) | Boolean | false |
placeholder | 选择器未选择时显示的占位字符,若为字符串,则各级别选择器均使用该作为占位字符,若为数组,根据数组对应位置的字符串设置选择器占位字符,若数组元素少于级别数,缺省的则设为默认数组中对应的占位字符 | Array | String | '请选择省', '请选择市', '请选择县区', '请选择街道' |
not-found-text | 无数据时显示的文字提示,规则同placeholder属性 | Array | String | '无匹配市', '无匹配县区', '无匹配街道' |
disabled | 设置禁用整个级联选择器或某个级别的选择器,可只写disabled ,也可写:disabled="true" 或"false" ,或传入一个数组,如禁用二级和四级选择器则为[1, 3] ,也可传入数值指定从指定级别开始禁用 | Boolean | Array | Number | false |
事件 | 说明 | 返回值 |
---|---|---|
on-change | 选择完成后的回调,返回值此时已选的数据数组 | data |
补充说明:
data-type数据格式补充说明:
- data-type="all"时,返回数据格式如下:
[ { code: '130000', name: '河北省' }, { code: '130100', name: '石家庄市' } ]
- data-type="name"时,返回数据格式如下:
['河北省', '石家庄市']
data-type="code"时,返回数据格式如下:
['130000', '130100']
v-model属性补充说明:
传入名称数组,若所设地方名称未找到或地方所属关系不对,则显示该等级列表中第一个地方,若数组地方个数少于城市及联选择器的等级数目,则后面缺省的地方名默认已列表中第一个地方显示;且如果设置了数组且不为空,则每次选择一个等级的地方后下面级别的选择器的列表都会更新,且默认选中的为对应列表中第一个地方
ex: ['河北省', '长春市']
- 传入编号数组,若所设编号未找到对应地方或地方所属关系不对,则显示该等级列表中第一个地方,规则同上
ex: ['130000', '120100']
- 传入空数组 []
al-cascader:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 用于存放结果的数组,建议使用v-model来做双向绑定 | 无 | 无 |
v-model | 用于存放结果的数组,选择了数据后会自动更新 | 无 | 无 |
level | 要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级 | String | Number | 3 |
data-type | 返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式同al-selector补充说明 | String | all |
size | 选择器尺寸,该属性同iview组件cascader的size属性,可选值为small,large | String | 无 |
placeholder | 选择器未选择时显示的占位字符 | String | '请选择'] |
disabled | 是否禁用选择器 | Boolean | false |
render-format | 选择后展示的函数,用于自定义显示格式 | Function | label => label.join(' / ') |
事件 | 说明 | 返回值 |
---|---|---|
on-change | 选择完成后的回调,返回值此时已选的数据数组 | data |