更新记录

V1.0.0（2024-09-09）

2024-09-8： 1、搜索下拉选择器，支持自定义图标，搜索文本，搜索提示 2、自动输入关键词时防抖自动触发搜索 3、支持api返回大数据时虚拟滚动和虚拟列表，无卡顿隐患 4、父组件调用时可自定义样式 5、支持输入框模糊搜索下拉数据

平台兼容性

uni-app

uni-app x

功能介绍文档

组件概述

本组件是一个高度可定制的下拉搜索框组件，专为提升用户交互体验而设计。它集成了搜索、选择和展示功能，适用于需要在较长列表中快速查找和选择条目的场景。通过简洁直观的界面，用户可以轻松完成复杂的数据选择任务，极大地提高了操作的便捷性和效率。

主要功能

• 搜索功能：支持对列表项进行实时搜索，帮助用户快速找到所需选项。
• 多选与单选：可配置为单选或多选模式，满足不同场景的需求。
• 自定义样式：提供多种自定义样式选项，包括输入框样式、下拉框样式、选项样式等，以适应不同的界面设计风格。
• 虚拟滚动：采用虚拟滚动技术，优化长列表的渲染性能，即使是成千上万的列表项也能流畅展示。
• 清空选择：用户可以通过一键清空按钮快速取消已选项，提供了更好的控制体验。
• 可访问性：考虑到可访问性设计，确保所有用户都能平等地使用该组件。

使用方法

引入组件

在你的项目中，首先确保已经正确引入了Vue和UniApp的相关依赖。然后，将组件文件包含到你的项目中，并在需要使用下拉搜索框的页面上引入该组件。

基本配置

组件的基本配置主要通过props进行：

props: {
    showSearch: Boolean, // 是否显示搜索框
    modelValue: [Number, String, Array, Object], // 绑定的值，根据单选或多选模式决定类型
    multiple: Boolean, // 是否启用多选模式
    list: Array, // 下拉列表的数据源
    valueKey: String, // 作为值的键名
    labelKey: String, // 作为标签的键名
    // 其他配置...
}

示例代码

<template>
    <view class="main">
        <larry-selects
            :list="yourDataList"
            :showSearch="true"
            :multiple="false"
            valueKey="id"
            labelKey="name"
            @update:modelValue="handleSelection"
            @search="handleSearch">
        </larry-selects>
    </view>
</template>

<template>
    <view class="larryms-form-item">
        <larry-selects height="38px" :multiple="false" :list="countries" :showSearch="true"
            placeholder="Country" label-key="label" value-key="value" title="Select Country" clearable
            v-model="baseFormData.country" @search="searchCountries" searchText="Search"
            searchPlaceholder="Enter the country name">
        </larry-selects>
    </view>
    <view class="larryms-form-item">
        <larry-selects height="38px" :multiple="false" :list="schools" :showSearch="true"
            placeholder="University" label-key="label" value-key="value" title="Select University" clearable
            v-model="baseFormData.school" @search="searchSchools" searchText="Search"
            searchPlaceholder="Enter university name" :canShowDropdown="!!baseFormData.country">
        </larry-selects>
    </view>
</template>

<script setup>
const fetchCountries = async () => {
    const cacheKey = 'globalCountryList';
    if (USE_CACHE && Cache.has(cacheKey)) {
        countries.value = Cache.get(cacheKey, true);
        originalCountries.value = Cache.get(cacheKey, true); // 初始化时也保存一份原始数据
    } else {
        const response = await getCountries();
        if (response && response.data) {
            let countryList = response.data.map(country => ({
                label: country.name,
                value: country.name
            }));
            countries.value = countryList;
            originalCountries.value = countryList; // 初始化时也保存一份原始数据
            Cache.set(cacheKey, countryList);
        }
    }
};
fetchCountries();
// Search function for countries (local search)
const searchCountries = async (keyword) => {
    if (keyword) {
        const filteredCountries = originalCountries.value.filter(country =>
            country.label.toLowerCase().includes(keyword.toLowerCase())
        );
        countries.value = filteredCountries;
    } else {
        countries.value = originalCountries.value;
    }
};

const searchSchools = async (keyword) => {
    if (!baseFormData.value.country) {
        uni.showToast({
            title: 'Please select a country first.',
            icon: 'none',
            duration: 2000
        });
        schools.value = [];
        return [];
    }
    const response = await getUniversity(keyword, baseFormData.value.country);
    if (response && response.data) {
        schools.value = response.data.map(school => ({
            label: school.university_name,
            value: school.value
        }));
    } else {
        schools.value = []; // 如果没有搜索结果，清空学校列表
    }
};
</script>

事件处理

• @update:modelValue：当选中的值发生变化时触发，可以用来更新绑定的值。
• @search：在用户进行搜索操作时触发，可以用来执行搜索逻辑。

样式自定义

组件提供了多个样式定制点，例如：

• inputStyle：定义输入框的样式。
• placeholderStyle：定义占位符的样式。
• bgColor、selectBgColor：定义背景颜色。

通过传递相应的props，你可以轻松地自定义这些样式，以符合你的应用风格。

总结

本下拉搜索框组件易于定制。无论是在移动应用还是Web应用中，它都能为用户提供流畅、直观的选择体验。通过简单的配置，你可以快速地将它集成到你的项目中，提升你的应用的用户交互质量。