vue2 实现一个input查询 + 下面为chechbox的下拉列表组件

vue2 实现一个input查询 + 下面为chechbox的下拉列表组件

CheckboxSearch

<!-- 快捷筛选 - 关键字查询支持可勾选的下拉 CheckboxSearch -->
<template>
    <div class="checkbox-search">
        <input
            v-model="searchText"
            type="text"
            placeholder="请输入关键字"
            class="ipt"
            @input="handleSearch"
        >
        <div
            v-for="item in filteredItems"
            :key="item.id"
            class="ipt-item"
        >
            <input
                v-model="item.checked"
                type="checkbox"
                class="checkbox"
                @change="handleCheck(item)"
            >
            <span>{{ item.text }}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        items: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            searchText: '',
            filteredItems: this.items,
            checkArr: []
        };
    },
    methods: {
        handleSearch() {
            this.filteredItems = this.items.filter(item => {
                return item.text.toLowerCase().includes(this.searchText.toLowerCase());
            });
        },
        handleCheck(item) {
            this.checkArr.push(item);
            let resArr = [];
            resArr = this.checkArr.filter(item=>item.checked).map(item=>item.id);
            this.$emit('check', resArr);
        }
    }
};
</script>
<style  lang="scss" scoped>
.checkbox-search {
	background: #fff;
	height: 100%;
	overflow-y: auto;
	padding: 10px 20px;
	width: 100%;
	max-height: 250px;

	.ipt {
		margin-bottom: 10px;
		height: 28px;
		line-height: 28px;
		width: 160px;
		outline: none;
		border-radius: 4px;
		border: 1px solid #ccc;
		padding-left: 5px;
	}

	input::placeholder {
		padding-left: 5px;
		color: #999;
	}

	.ipt-item {
		height: 26px;
		line-height: 26px;
		margin-bottom: 5px;
		color: #666;
	}
	// #2469F1
}
</style>

使用

                    <CheckboxSearch
                        :items="items"
                        @check="handleCheck"
                    />
            items: [
                { id: 1, text: 'Item 11', checked: false },
                { id: 2, text: 'Item 12', checked: false },
                { id: 3, text: 'Item 22', checked: false },
                { id: 4, text: 'Item 33', checked: false },
                { id: 5, text: 'Item 44', checked: false },
                { id: 6, text: 'Item 55', checked: false },
                { id: 7, text: 'Item 66', checked: false },
                { id: 8, text: 'Item 77', checked: false },
                { id: 9, text: 'Item 88', checked: false },
                { id: 10, text: 'Item 99', checked: false },
                { id: 11, text: 'Item 111', checked: false }
            ],
            checkArr: [],

        handleCheck(item) {
            console.log('handleCheck', item);
        },

效果