uniapp 下拉+关键字搜索组件封装

<template>
    <view>
        <u-overlay :show="isShow" :close="false">
            <view class="selectBox">
                <view class="select">
                    <view class="btnBox">
                        <view class="flex" style="justify-content: space-between; margin-bottom: 20rpx;">
                            <view @click='close'>取消</view>
                            <view style="color: #3C9CFF;" @click.stop='confirm'>确定</view>
                        </view>
                        <view @click.stop>
                            <u-search placeholder="请输入关键字" v-model="searchValue" :showAction="false"></u-search>
                        </view>
                    </view>

                    <view class="myCheckbox">
                        <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
                            iconPlacement="right">
                            <u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList"
                                :key="item.value" :label="item.newElectricRoom" :name="item.value">
                            </u-checkbox>
                        </u-checkbox-group>
                    </view>
                </view>
            </view>

        </u-overlay>
    </view>
</template>

<script>
    export default {
        props: {
            show: {
                type: Boolean,
            },
            checkboxList: {
                type: Array,
                // default: function () { return [] }
                default: () => []
            },
            checkboxActiveList:{
                type: Array,
                default: () => []
            }
        },

        data() {
            return {
                isShow: false,
                searchValue: '',
                // checkboxList:[]
                checkData: [],
                checkboxValue1:[]
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            checkboxChange(e) {
                this.checkData = e;
            },
            confirm() {
                this.$emit('confirm',this.checkData)
            }
        },
        watch: {
            show(newV, oldV) {
                this.isShow = newV
            },
            checkboxList(newV, oldV) {
                // console.log(newV)
            },
            searchValue(val) {
                this.$emit('search', val)
            },
            checkboxActiveList(val){
                this.checkboxValue1=this.deepClone(val)
            }

        }
    }
</script>

<style lang='scss' scoped>
    .selectBox {
        display: flex;
        flex-direction: column;
        justify-content: end;
        min-height: 100vh;

    }

    .select {
        background: #fff;
        padding: 0 20rpx;
        position: relative;
        bottom: 0;
        width: 100%;
        height: 600rpx;
        overflow-y: auto;

        .btnBox {
            /* display: flex; */
            /* justify-content: space-between; */
            font-size: 30rpx;
            position: sticky;
            top: 0;
            background-color: #fff;
            padding: 20rpx;
            z-index: 111;
        }

        .search {

            /* margin-top: 20rpx; */
        }

        .myCheckbox {
            margin-top: 40rpx;
            padding-left: 40rpx;
            padding-right: 40rpx;

            .u-checkbox {
                display: flex;
                /* justify-content: space-between; */
            }
        }
    }
</style>

使用

<multiple-select :show="deviceShow" :checkboxList="energyList" @close="deviceClose" @confirm="deviceConfirm"
            @search="searchFn" :checkedData.sync="deviceList" @viewerListFn="viewerListFn">
        </multiple-select>