自定义弹窗搜索组件

<template>
    <view>
        <view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popup" background-color="#fff">
                <view>
                    <view class="searchin">
                        <view style="display: flex;width: 100%;">
                            <button plain="true" size="mini" class="colbtn" @click="cancelChange">取消</button>
                            <uni-easyinput class="searcheas" radius="0" placeholder="搜索" v-model="searchKey"
                                @input="search" />
                            <button plain="true" size="mini" class="subbtn" @click="sureSelect">确定</button>
                        </view>
                        <picker-view :value="pickerValue" indicator-style="height:50px;" @change="bindChange">
                            <picker-view-column>
                                <view class="item" v-for="(item,index) in pickerList" :key="index"
                                    @click="qdChange(item)">
                                    <text style="color: #a5a5a5 ;">{{item.code}}</text>
                                    <text style="margin-left: 10px;">{{item.name}}</text>
                                    <text style="margin-left: 10px;color: #ffb245 ;">{{item.py}}</text>
                                </view>
                            </picker-view-column>
                        </picker-view>
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['list'],
        watch: {
            list() {
                this.requestList()
            }
        },
        data() {
            return {
                pickerValue: [],
                pickerList: [],
                searchKey: '',
                searchval: '',
                index: 0,
            }
        },
        methods: {
            // 打开弹窗
            toggle(type) {
                this.searchKey = ''
                this.$refs.popup.open(type)
            },
            requestList() {
                this.pickerList = this.list
            },
            // 筛选
            search(val) {
                this.pickerList = []
                if (val !== '') {
                    this.list.forEach(v => {
                        if (v.name.indexOf(val) !== -1 || v.code.indexOf(val) !== -1 || v.py.indexOf(val) !== -1) {
                            this.pickerList.push(v)
                        }
                    })
                } else {
                    this.pickerList = this.list
                }
            },
            // 选择取消
            cancelChange() {
                this.$refs.popup.close()
            },
            // 确定
            sureSelect() {
                this.searchval = this.pickerList[this.index]
                this.$refs.popup.close()
                this.$emit("searchVal", this.searchval)
            },
            // 切换选择
            bindChange(n) {
                this.index = n.detail.value[0]
                this.searchval = this.pickerList[n.detail.value[0]]
            },
            // 点击选择
            qdChange(item) {
                this.searchval = item
                this.$refs.popup.close()
                this.$emit("searchVal", this.searchval)
            },
        }
    }
</script>

<style lang="scss">
    picker-view {
        width: 100%;
        height: 700rpx;
        margin-top: 20rpx;
    }

    .item {
        line-height: 100rpx;
        text-align: center;
    }

    .searchin {
        .uni-easyinput__content-input.data-v-abe12412 {
            margin-top: -7px;
        }

        .searcheas {
            margin-top: 15rpx;
            font-size: 3em;
            width: 70%;
        }

        .subbtn {
            margin-top: 13px;
            border-style: none;
            font-size: 14px;
            padding: 0px 10px;
        }

        .colbtn {
            margin-top: 13px;
            border-style: none;
            font-size: 12px;
            padding: 0px 10px;
        }

        .uni-easyinput.data-v-abe12412 {
            height: 30px;
        }
    }
</style>