eleme-area-selector
控件本质是一个多级联下拉菜单,配上多选和 Tags 组件,用于数据门户、EMA 的区域筛选功能。
用法
引用
NPM
npm i eleme-area-selector
配置
基础配置
new AreaSelector(element[, options])
options 参数
参数名 | 说明 | 类型 | 默认值 |
---|---|---|---|
api | 所有内置数据类型的 base url,需要使用自定义类型时才需要修改 | String | /api/other/filter/ |
style | 样式文件的 CDN 地址 | String | //unpkg.com/eleme-area-selector/dist/style.css |
selectItemStyle | 列表中单位的高度和按需加载的单位 | Object | { height: 27, display: 20 } |
selectSliceLength | 开启按需加载的列表长度,超过这个数值则开启按需加载 | Number | 200 |
defaultSelect | 初始状态是否默认选择第一层级的所有项(cache 属性打开时依然优先 cache 的值) | Boolean | true |
typeMap | 内置的数据门户常用过滤器类型(以前他们说绝对不加新的了 WTF | Object | see |
types | 当前实例展示的可选类型,大于 1 个时会显示一个下拉菜单供选择(如果不需要,可以直接使用样式来隐藏 | Array | ['交易平台BU'] |
onReady | 数据加载完毕,默认选项有值 | Function | null |
onChange | 选项的选中状态发生了改变 | Function | null |
onTypeChange | 用户通过下拉菜单改变了 type 值 | Function | null |
loadingMessage | 文案 | Array | ['正在加载资源...', '正在请求数据...'] |
responseHandler | 得到返回数据后的处理函数,会传入两个参数,第一个为接口返回的原始数据,第二个为后续的 Build 方法,需要把处理完成后的数据传递进去 | Function | null |
实例方法
var as = ; as; // 会立即触发一次数据请求 as; // 清空当前选择项 as; // 获取当前的选择信息
调用方式
简单实例
as = document api: '/api/filter' typeMap: '交易平台BU': id: 'bu' params: key1: 'value1' // 请求会组装成 /api/filter/bu?key1=value1 types: '交易平台BU' '城市' cache: true { console } { console } // { level: 1, data: '123,3453,676,1' } { console }
内置类型列表
'交易平台BU': id: 'bu' params: time: 'hour' '红包': id: 'redReward' 'BOD': id: 'bod' '高校': id: 'business/gx' '白领': id: 'business/bl' '早餐': id: 'breakfast' '城市补贴与优惠': id: 'cityAllowance' '城市': id: 'cityAllowance'
使用内置类型
document types: '交易平台BU' '城市' { if data && datacode === 200 && datadata return datadata; }
使用自定义类型
document api: '/api/filter' typeMap: '自定义': id: 'custom' params: key1: 'value1' // 请求会组装成 /api/filter/custom?key1=value types: '自定义' { if data && datacode === 200 && datadata return datadata; }