更新记录
1.0.1(2021-03-17) 下载此版本
1.0.1
1.0.0(2021-03-17) 下载此版本
初始版本
平台兼容性
版本: 1.0
使用方法
前言
目前只有H5测试通过,小程序及APP端均未测试及使用过,后期抽空测试及完善。
组件引入和注册
import JpColSelector from '@/components/JP-selector/JP-2col-selector.vue';
//或者
import JpColPicker from '@/components/JP-selector/JP-2col-picker.vue';
export default {
components: {
JpColSelector,
JpColPicker
}
}
组件使用
<!--
jp-col-selector 普通选择器
jp-col-picker 弹出层 picker选择器
两个组件用法一基本致, 交互不一样
-->
<jp-col-selector
ref="colSelector"
:options="options"
:onlyGetChildrenNodes="onlyGetChildrenNodes"
:hasUnlimited="hasUnlimited"
:props="props"
:checkeds.async="checkeds"
:multiple="multiple"
@confirm="confirm"
@cancel="close">
</jp-col-selector>
<jp-col-picker
ref="colSelector"
:options="options"
:onlyGetChildrenNodes="onlyGetChildrenNodes"
:hasUnlimited="hasUnlimited"
:props="props"
:checkeds.async="checkeds"
:multiple="multiple"
@confirm="confirm">
<input v-model="value" placeholder="请选择区域" disabled />
</jp-col-picker>
参数说明
参数 | 说明 | 类型 |
---|---|---|
options | 选择器参数,支持两层,例如:[{label: '成都', value: 1, children: [{label: '金牛区', value: 2}]}] | Array |
onlyGetChildrenNodes | 是否只返回选中的第二级节点的值 | Boolean |
hasUnlimited | 是否显示“不限” | Boolean |
props | 规定options选项的字段名,例如:{label: 'name', value: 'id', children: 'items'} | Object |
checkeds | 组件默认选中的值,options的value, 例如:[1,2,3] | Array |
confirm | 组件确认选择事件 | Function({nodes, keys, labels}){} |
cancel | 组件取消事件 | Function(){} |
update | 自动更新checkeds的事件 | - |