zxz-uni-data-select 插件，uniapp项目vue3，下拉框可搜索，使用问题解决，如何使用，类型声明，自动扫描全局使用，插件文件eslint报错，组件导入。input点击出现蓝色问题

已于 2024-01-19 09:45:20 修改
阅读量1.6k 收藏 10
点赞数 7
文章标签： 前端
于 2024-01-19 09:43:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_colo/article/details/135689580
版权
本文介绍了在Uniapp项目中遇到的iOS系统特有的点击样式问题，以及如何通过zxz-uni-data-select插件实现安卓和Windows系统所缺失的下拉框搜索功能。还提到了解压插件、全局使用、类型声明和处理eslint报错的方法。
摘要由CSDN通过智能技术生成

input框点击出现蓝色背景，uniapp项目，这是ios系统手机独有的问题，安卓和window系统没有。要在点击的标签里面加上 -webkit-tap-highlight-color-CSDN博客

uniapp项目，要实现下拉框可搜索的功能，uniapp官方组件和uview都没有这个功能的组件。我到uniapp的插件市场找了个下载多的插件 zxz-uni-data-select

这个插件可以实现下拉框搜索功能

点击下载zip包

 下载后解压

 然后在pages.json里的自动扫描配置里添加这个插件，让uniapp自己扫描，这样就可以全局用了

 然后给这个插件要进行类型声明，和自己写全局组件的类型声明一样

有时下载的插件文件会报错，这和我们的eslint检查有关，要想不报错

 在这个插件文件里，在最顶部写/* eslint-disable */

让eslint不检查这个文件

 然后在你需要的页面里，导入这个插件

 组件名

 这个下拉框可搜索的组件能用了

烟火的降落
关注
uniapp/h5多选模糊搜索下拉框（可以进行搜索匹配以及多选功能）
04-01
uniapp/h5通用模糊下拉搜索下拉多选框； 使用步骤： 1、下载资源包，并进行解压； 2、将components文件夹中的文件拷贝到自己项目的components文件夹中； 3、在业务文件夹中引用组件multipleDataPickey，使用实例如searchMultipleSelect.vue文件
zxz-uni-data-select 下拉框选择器 支持大小写搜索重写 filterMixinDatacomResData() 方法
weixin_45710745的博客
01-10 750
【代码】zxz-uni-data-select 下拉框选择器 支持大小写搜索重写 filterMixinDatacomResData() 方法。
uni-data-select 插件配置接收字段，更改默认的text,value
涂涂
07-15 1447
当后台返回的数据源格式不是如下value,text字段时，需要自定义字段配置。思路一：前端遍历更改为value，text。
uniapp使用插件zxz-uni-data-select多选时自动全选
LJXZZZZZ的博客
01-31 680
当需要下拉框多选时，若选择的数据没有value属性，那么点击下拉框的任意选项都会自动全选，无法实现多选的正常结果，所以要记得加上value属性。
uni-app 微信小程序 zxz-uni-data-select 下拉框选择器 多个下拉无法关闭bug
weixin_45710745的博客
01-10 723
调用 toggleSelector();调用 showSelector 属性 判断是否开启。
zxz-uni-data-select插件，表单回显时，无法显示数据，原因是后端返回的数据是字符串，要把这个字符串转成number类型，就能显示了
Frank_colo的博客
01-20 1222
zxz-uni-data-select插件，uniapp项目，vue3。用Number()方法把字符串转成number。string转成number 回显就能显示了。表单回显时，这个下拉框不能显示数据。
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 9050
uni-app——下拉框多选
uniapp下拉框带搜索，select下拉框增加搜索功能，手写简易版
guojixin12的博客
08-30 2692
手写了一个简易版uniapp能搜索的下拉框（select），各位仁者见仁智者见智吧，有时间再优化，现在一个人搞同时搞四个项目，属实是被剥削了。随便搞一点样式，动画什么就不写了，想要自己搞一下的自己优化吧。想搜一个直接复用的，奈何都不是很好用。万恶的产品使我进步！
uniapp中下拉组件uni-data-select不支持监听展开收起的解决完善
lyz246859的博客
08-30 1639
uni-data-select二次开发支持监听收起展开
vue3+antd select选择器实现下拉框筛选
weixin_42234899的博客
03-06 1164
我是在filterOption方法中通过当前输入的值所在的对象的value和全量下拉框的value做比较，筛选出来符合条件的进行展示。2、:filter-option="filterOption"是展示搜索后的的结果。a-select标签上加入show-search属性，即支持搜索项；提示：请根据searchTitleList.value的结构进行比较。
uni-ui中的下拉框没有搜索功能怎么办?
m0_73146522的博客
01-05 378
当然是把uni-ui中的组件挨个挨个翻,有时候一个人上网真的特别特别无助,翻遍了各大网站为什么没有人说这个组件(可能是我关键词没用对,关键是我这种小白能想到是这种关键词?真的气死我了),uni-ui我请问你取个组合框名字是弄啥勒?需求中要求必须实现下拉框模糊查询功能,下拉框不支持输入查询怎么办?呵呵,我这种懒b不可能(其实是不会)组件名为:uni-combox。
Vue3选择器（Select）
热门推荐
Mr Dear的博客
03-31 1万+
下拉选择器组件，支持禁用、禁用选项、清除、搜索、自定义过滤函数、自定义选项字段名、自定义下拉面板数、自定义下拉面板滚动条、自定义样式等。总之，功能丰富，简单易用😁😁
uniapp uni-data-select n.collection is not a function和应用未关联服务空间，请在uniCloud目录右键关联服务空间同时出现
SSophia的博客
12-08 3875
Error in callback for watcher "function () {var e = [];return ["pageCurrent", "pageSize", "localdata", "collection", "action", "field", "orderby", "where", "getont", "getcount", "gettree", "groupby", "groupField", "distinct"].forEach(function (t) {e.push(
uniapp搜索功能
weixin_52312684的博客
05-24 1673
搜索
uni-data-select的使用（做笔记用，不喜勿喷！！）
weixin_67281896的博客
06-27 9463
1.使用uni-da'ta-select下拉框放接口数据时，出现不渲染的情况----可能是因为方法还没拿到数据，而组件已经渲染完毕了，因此加了一个显示控制。
uni-data-select通过v-model绑定数据，在数据未更新前，触发change事件
sumire27的博客
07-26 3013
需要在uniapp中使用下拉列表框联动查询表，使用uniapp官方ui组件。uni-data-select通过v-model绑定数据，在数据未更新前，触发change事件
【新手笔记】uni-data-select组件下拉内容滚动
juan_uper的博客
06-02 4532
发现如果组件位于靠下的地方，可能内容会显示不完整，无法自动滚动。 最后通过F12发现这个插件分两层，第二层的类名**.uni-select__selector-scroll**，很明显是专门用来设置可滑动的。。但是uniapp的官网似乎没有这个API所以最后直接使用deep方法添加overhidden解决了：
uniapp 下拉框效果使用 uni-data-select标签
新人一枚，互相学习哦！
04-20 1万+
uniapp 下拉框效果使用 uni-data-select标签
uniapp之u-select选择器回显
xyq_mxnx的博客
07-23 9633
<!-- 性别 --> <u-select v-model="showsex" :list="sexlist" @confirm="sexconfirm" :default-value="subjectAarr"></u-select> <!-- 生日 --> <u-picker v-model="birthdayshow" mode="time" :default-time="date" :params="params" @confirm="birt.
vue使用2.6.14@vue/composition-api@1.6.0
最新发布
09-20
Vue 2.6.14版本结合了`@vue/composition-api` v1.6.0库，这是一种轻量级的API，旨在提供更简洁、更函数式的方式来管理组件的状态和副作用。Composition API允许开发者将组件的业务逻辑分解为独立的“计算”和“动作”，提高了代码的组织性和模块化程度。 在Vue中，`@vue/composition-api`可以用来替代传统的`methods`、`data`、`watch`等选项，通过`setup()`函数编写，这使得状态管理和组件间的通信变得更清晰。例如，你可以创建响应式的`ref`变量来存储数据，使用`reactive`或`toRef`来创建，以及使用`onMounted`、`onUpdated`等钩子处理生命周期事件。 以下是`composition-api`的一个简单示例： ```javascript import { ref, onMounted } from '@vue/composition-api'; export default { setup() { // 创建一个响应式的数字计数器 const count = ref(0); // 在组件挂载时执行一些初始化操作 onMounted(() => { console.log('Component mounted'); }); // 每次count改变都会触发这个方法 watch(count, (newCount) => { console.log(`Count updated to ${newCount}`); }); return { count, increment: () => count.value++ // 调用自定义方法增加计数 }; } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值