更新记录

1.0.0(2024-09-27) 下载此版本

初始


平台兼容性

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

组件名:lfj-dropdown-box

代码块: lfj-dropdown-box

本插件基于官方插件 uni-data-select 进行二次开发拓展功能,支持uni-data-select本身功能不变(表单验证等)

拓展功能

  1. 单选
  2. 多选
  3. 搜索
  4. 下拉加载
  5. 右侧文字

API

lfj-dropdown-box Props

属性名 类型 默认值 说明
v-model String、Array、Number - 选中项绑定值
multiple Boolean false 是否多选
disabled Boolean false 是否禁用
rightTextShow Boolean false 是否显示右侧文字
dropDownLoading Boolean false 是否开启下拉加载
map Array {text: 'text', value: 'value', rightText: 'rightText', disable: 'disable'} 字段映射,将text/value映射到数据中的其他字段
filterable Boolean false 是否开启搜索
localdata Array - 下拉列表本地数据
placeholder String "请选择" 输入框的提示文字
emptyTips String "无选项" 无选项提示
clear Boolean true 是否清空
format String - 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
@change event event(String) 选中发生变化触发
@lower event event(String) 触底事件

示例

    <lfj-dropdown-box
    v-model="value3"
    placeholder="请选择内容"
    dropDownLoading
    rightTextShow
    multiple
    :loadStatus="loadStatus"
    :localdata="localdata"
    @lower="lower"
    @change="change"
></lfj-dropdown-box>

lower() {
    // 模拟接口数据
    let data = [
        {
            text: '新增数据1',
            value: '1ewq',
            rightText: 'rightText'
        },
        {
            text: '新增数据2',
            value: '2qwr',
            rightText: 'rightText'
        },
        {
            text: '新增数据3',
            value: '32weq',
            rightText: 'rightText'
        }
    ];
    let pageNum = Math.ceil(this.total / this.pageSize);
    if (this.pageNum < pageNum) {
        this.pageNum++;
        this.loadStatus = 'loading';
        setTimeout(() => {
            this.localdata.push(...data);
        }, 2000);
    } else {
        this.loadStatus = 'nomore';
    }
},
change(e) {
    console.log('回显的数据', e);
},

隐私、权限声明

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

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

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

许可协议

MIT协议

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