更新记录

V1.0.0(2024-09-09)

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

功能介绍文档

组件概述

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

主要功能

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

使用方法

引入组件

在你的项目中,首先确保已经正确引入了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:定义占位符的样式。
  • bgColorselectBgColor:定义背景颜色。

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

总结

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

“无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问