实现效果
筛选是filter,搜索框如有显隐需要,需自行添加配置显隐参数 弹出层高度样式需要手动修改,需自行添加配置高度参数 .json
文件配置"component": true,
实现代码
组件代码
< van-popup show = " {{ show }}" position = " bottom" round custom-style = " height:100%;z-index:2000;" class = " relative" > < view class = " pd-30 mb-30 fixed pickerTop w100 bg-white" > < view class = " flex" > < view class = " gray-3 fs14" bindtap = " close" > 取消</ view> < view class = " pickerText bold" > {{title}}</ view> < view class = " fs14" style = " color: { { colorStyle} } ; " bindtap = " getData" > 确认</ view> </ view> < view class = " pd-20 mt-40 bg border radius-10 flex_l" > < image src = " ../../../assets/img/search1.png" style = " width : 40rpx; height : 40rpx; " mode = " " class = " mr-20" /> < input bindinput = " getSearch" placeholder = " 请输入" > </ input> </ view> </ view> < view class = " plr-30 mulPicker" > < van-checkbox-group value = " {{ value }}" bind: change= " onChange" > < van-cell-group> < van-cell wx: for= " {{ dataList }}" wx: key= " index" value-class = " value-class" clickable data-index = " {{ index }}" bind: click= " toggle" > < van-checkbox catch: tap= " noop" class = " checkboxes-{{ index }}" checked-color = " {{colorStyle}}" name = " {{ item.dictValue * 1 }}" > {{item.dictLabel}}</ van-checkbox> </ van-cell> </ van-cell-group> </ van-checkbox-group> </ view>
</ van-popup>
Component ( { options: { addGlobalClass: true , } , properties: { show: Boolean, title: String, columns: { type: Array, value: [ ] , observer : function ( ) { this . handleData ( ) ; } } , value: Array, colorStyle: { type: String, value: "#3772E9" } , flag: String, } , data: { selectItem: null , dataList: [ ] , } , methods: { handleData ( ) { this . setData ( { dataList: this . data. columns} ) } , getData ( ) { this . triggerEvent ( "getData" , this . data. selectItem) ; this . close ( ) ; } , onChange ( e ) { console. log ( e. detail) ; let itemlet listif ( e. detail. length > 0 ) { if ( e. detail. length > 1 ) { list = e. detail. splice ( 1 , 1 ) } else { list = e. detail} item = this . properties. columns. find ( r => r. dictValue == list[ 0 ] ) } else { item = null list = [ ] } this . setData ( { value: list, selectItem: item } ) ; } , close ( ) { console. log ( "pick" ) ; this . triggerEvent ( "close" ) ; } , toggle ( event ) { const { index } = event. currentTarget. dataset; const checkbox = this . selectComponent ( ` .checkboxes- ${ index} ` ) ; checkbox. toggle ( ) ; } , noop ( ) { } , getSearch ( event ) { let { value, cursor, keyCode } = event. detaillet list = this . data. columns. filter ( item => item. nodeName?. includes ( value) ) this . setData ( { dataList: value ? list : this . data. columns} ) } } ,
} )
.pickerText { font-size : 16px;
} .pickerTop { border-radius : 50rpx 50rpx 0 0; z-index : 2000;
} .mulPicker { margin-top : 240rpx;
} .value-class { flex : none !important ;
}