背景
:今天在项目中需要用到Layui的下拉框新功能,但很不幸我们项目中使用的是比较老的layui版本,而新版本V2.6.5才推出了下拉框功能。虽然老版本不支持该功能,但是官网和度娘提示可以自己引入dropdown.js就可以使用下拉框功能,就这样,坑来了…
问题重现:
- 1.在Layui官网中下载到了大神维护的dropdown.js文件;
- 2.把dropdown.js文件放入layui对应的module目录下;
- 3.在需要用到下拉框的JS脚本中引入dropdown模块后进行使用(调式过程中为了确认资源已被layui正确加载,笔者还做了如下图的操作,代码层次上确认能够被加载);
- 4.万事俱备,只欠东风;来一波项目启动,走起ing… 嘿! 项目启动起来了,没问题,走一波浏览器访问需要加载下拉框的网页并没有出现想象中的下拉框样式,打开F12一看,并没有加载到dropdown.js资源(如下图所示),可明明已经在项目中添加了,是否为项目没有重新构建原因?笔者重新构建项目后再试,仍找不到drop资源,在F12对应的source下,看到浏览器的确未加载dropdown.js(如下图2所示)
问题解决:
- [ ] tips:如果找不到问题的解决方案,就解决提出这个问题的人…
哈哈,上面的话不适用该问题哈,这个问题我也看了很久,想到既然无法被layui加载,那么是否layui.js里少配置了什么东西,抱着试一试的心态,在layui.js中搜索了一下"module/",发现在layui中不止有一处匹配,且匹配的全是在module目录下已存在的文件,稍加思索便能确定应该是在此处少配置了dropdown的映射关系导致的,兴奋的加上后(如下图所示),再次启动项目就能够正确加载dropdown.js了,问题被完美解决!
问题思考:
1.是否在layui的module中引入其他自定义文件也需要这样配置就可以使用?
d:抱着试试的心态,笔者随意写了个js文件后进行配置,发现的确可以这样使用.
End
2023年3月2日更新
笔者建议,在官网中下载最新的Layui版本,官方在该博客写完后不久就已经支持了dropdown.js的内部嵌入!