更新记录

1.0.4（2025-04-03） 下载此版本

将监听输入值改为@custom或@search

1.0.3（2025-03-21） 下载此版本

基于uview-ui开发的搜索组件，支持远程搜索

1.0.2（2025-03-20） 下载此版本

基于uview-ui开发的远程搜索组件

平台兼容性

uni-app

其他

RemoteSelect 远程搜索

组件名：remote-select

基于uview-ui开发的远程搜索组件

基本用法

<template>
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="110">
        <u-form-item label="选中值" prop="remoteValue" borderBottom @click="show = true; hideKeyboard()" ref="item1">
            <u--input v-model="formData.selectObj.label" disabled disabledColor="#ffffff" placeholder="请进行远程搜索"
                border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
            <remote-select keyName="value" valueName="label" :show="show" :dataSource="remoteList"
                :loading="loading" @cancel='oncancel' @close="onclose" @confirm='onconfirm'
                v-model='formData.selectObj.value' :remoteMethod="remoteMethod"></remote-select>
        </u-form-item>
    </u--form>
</template>

    remoteMethod() {
        this.loading = true
        // 模拟远程搜索调用接口
        setTimeout(() => {
            fetch('/static/data.json').then(res => res.json()).then(res => this.remoteList = res.list)
            this.loading = false
        }, 2000)
    },
    oncancel() {
        this.show = false
    },
    onclose() {
        this.show = false
    },
    onconfirm(e) {
        this.show = false
        this.formData.selectObj = e.value
    }

data() {
    return {
        formData: {
            selectObj: {
                label: '',
                value: '',
            }
        },
        remoteValue: '',
        rules: {},
        show: false,
        remoteList: [],
        loading: false
    }
},

组件传值

     * @property {Boolean}          show                是否显示picker弹窗（默认 false ）
     * @property {Boolean}          showToolbar         是否显示顶部的操作栏（默认 true ）
     * @property {String}           title               顶部标题
     * @property {Boolean}          loading             是否显示加载中状态（默认 false ）
     * @property {Boolean}          remote              仅可筛选则为false（默认） 需要远程选择为true
     * @property {String | Number}  itemHeight          各列中，单个选项的高度（默认 44 ）
     * @property {Array}            dataSource          对象数组，设置数据
     * @property {String}           cancelText          取消按钮的文字（默认 '取消' ）
     * @property {String}           confirmText         确认按钮的文字（默认 '确定' ）
     * @property {String}           cancelColor         取消按钮的颜色（默认 '#909193' ）
     * @property {String}           confirmColor        确认按钮的颜色（默认 '#3c9cff' ）
     * @property {String | Number}  visibleItemCount    每列中可见选项的数量（默认 5 ）
     * @property {String}           keyName             选项对象中，需要双向绑定属性键名（默认 'id' ）
     * @property {String}           valueName           选项对象中，需要展示的属性键名（默认 'label' ）
     * @property {String | Number}  value               双向绑定数据，默认展示的值
     * @property {String | Number}  placeholder         搜索框placeholder
     * @property {Function}         remoteMethod        远程搜索方法
     * @property {Boolean}          closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）

     * @event {Function} close      关闭选择器时触发
     * @event {Function} cancel     点击取消按钮触发
     * @event {Function} change     当选择值变化时触发
     * @event {Function} confirm    点击确定按钮，返回当前选择的值