|
…
|
||
|---|---|---|
| .. | ||
| components/lfj-dropdown-box | ||
| changelog.md | ||
| package.json | ||
| readme.md | ||
组件名: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 | 是否开启下拉加载 |
| loadStatus | String | more | 加载更多状态 (loading/more/nomore) |
| map | Array | {text: 'text', value: 'value', rightText: 'rightText', disabled: 'disabled'} | 字段映射,将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);
},