更新记录

1.0.7（2023-12-14）

修复icon

1.0.6（2023-09-25）

增加多选，多次搜索默认值选项回显功能

1.0.5（2023-08-15）

修复小程序端兼容性问题

平台兼容性

next-search-select --下拉多选，单选，搜索

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

使用

从uniapp插件市场导入

<template>
    <view class="title"><text>1. 单选模式：</text></view>
    <view class="item">
        <next-search-select
            :multiple="false"
            :list="options"
            label-key="projectName"
            value-key="id"
            placeholder=" 请选择报备项目"
            title="选择报备项目"
            v-model:value="projectId"
            @search="searchFunc"
            @change="changeCallback"
            clearable
        ></next-search-select>
    </view>
    <view class="title"><text>2. 多选模式：</text></view>
    <view class="item">
        <next-search-select
            :multiple="true"
            :list="options"
            label-key="projectName"
            value-key="id"
            placeholder=" 请选择报备项目"
            title="选择报备项目"
            v-model:value="projectIds"
            @search="searchFunc"
            @change="changeCallback"
            clearable
        ></next-search-select>
    </view>
</template>

vue3 + ts 使用

<script setup lang="ts">
import {ref, unref} from "vue"

const options = ref<any>([])
// 单选模式下绑定的值是字符串
const projectId = ref("")
// 多选模式值必须是数值类型
const projectIds = ref([])
let dataLength = 0

function searchFunc(val?) {
    console.log("搜索的关键字：", val)
    uni.showLoading({
        title: '请稍后...',
        icon: 'none'
    })
    // 模拟ajax请求
    setTimeout(() => {
        options.value = []
        dataLength = 0
        if (dataLength < 40) {
            for (let i = 0; i < 40; i++) {
                options.value.push({
                    id: `id-${val ? val + '-' : ''}${dataLength + i}`,
                    projectName: `项目item-${val ? val + '-' : ''}${dataLength + i}`,
                    ohterKey: `test-${i}`,
                    disabled: i%2 === 0
                })
            }
            dataLength = unref(options).length
        }
        uni.hideLoading()
    }, 1000)

}
function changeCallback(item) {
    console.log("选中的item：", item)
}
searchFunc()
</script>
<style lang="scss">
    .title {
        color: #f9ae3d;
        font-size: 30rpx;
        padding: 20rpx 10rpx;
        background-color: #333;
    }
    .item {
        padding: 10rpx 20rpx;
        border: 1rpx solid #ccc;
    }
</style>

vue2 同样支持，在这里不再写demo

组件按需加载

如果不需要组件全局加载，而已把组件拷贝到项目的components目录下，单独引入进来使用即可达到按需加载的效果

预览

功能预览

参数

next-search-select Props

可选参数属性列表

Event 事件