更新记录
1.0.0(2024-09-27)
下载此版本
初始
平台兼容性
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本身功能不变(表单验证等)
拓展功能
- 单选
- 多选
- 搜索
- 下拉加载
- 右侧文字
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);
},