实现效果
- 筛选是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 = nulllist = []}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;
}