uniapp下拉选择组件

目录

背景

实现思路

代码实现

配置项

使用

尾巴

---

背景

最近遇到一个这样的需求，在输入框中输入关键字，通过接口查询到结果之后，以下拉框列表形式展现供用户选择。查询了下uni-app官网和项目中使用的uv-ui库，没找到符合条件的组件。唯一一个有点类似的就是uni官方下拉框组件，但是不支持input组件，所以我们自己来实现一个。

实现思路

那么实现这样一个组件要有哪些注意点了？我大概罗列了一下：
1、下拉框默认是不显示的，要知道是在哪个位置显示
2、初始显示的组件不能定死，可以是button，可以是view，或者是input，要灵活
3、提供丰富的自定义配置
要解决第一和第二个问题，我们的自定义组件需要使用插槽，插槽用来放我们的初始显示组件，来灵活适配各种组件。然后在插槽下面来通过绝对定位来显示下拉框组件，默认隐藏，然后暴露出显示函数给外部。

代码实现

接下来就是代码实现环节了，有了思路直接按思路撸代码就行。

知道你们不喜欢啰嗦BB，哈哈，直接上代码
down-select.vue组件代码：

test.vue测试页面代码：

以上代码都可以直接拷贝使用，无其他关联项，vue2、vue3、小程序、h5、APP都可用。

配置项

1、showKey：传进来的数组单个对象在下拉框中要展示的值，比如传的dataList为[{name: ‘韩梅梅’}],那showKey传name就行。
2、mode：下拉框是单选还是多选模式，见镇楼效果图。
3、dataList：传入的数据列表，列表为对象，多选时对象需要指定唯一标识。
4、checkedDataList：多选选中的列表数据。
5、max：多条数据时最多显示几项后可以滑动。
6、identifier：唯一标识符，用作列表key和多选模式显示已选数据项时的标识。
7、itemSelectColor：多选模式选中后的字体颜色。
8、itemColor：字体颜色。
9、itemFontsize：字体大小。

使用

页面引入down-select.vue，然后参考第二节代码实现中的demo。

尾巴

今天的文章就到这里了，希望能给大家帮助，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！