都2025了还要用Layui做下拉控件-我只能说你有水平

事件的起因是,之前的一个同事发消息问我,会不会写下拉控件,我说那个挺简单的,不是很麻烦的。 去网上找找前端的比如vue下拉控件啥的呀,但是他告诉我,他的后台管理系统用的是LayUI框架。

唉。。。长叹一口气,算了就帮你找找吧,谁叫我们是同一个槽子的牛马呢!

那么就开始吧!,LayUI虽然现在已经不维护了,但是有的JS还是能在官网上找到的,而且找到以后却和他LayUI的版本不兼容,就导致即使写完了,点击下拉框也是不起作用,控制台报一堆乱七八糟的错!

首先确定版本兼容

可以看到LayUI.js用的是2.2.6版本,真老呀!都不知道牙掉了没!

相应的查看这个前端官网可以看到,下拉控件用的是Dropdown,那么我们就去找相应的css和js了。 在网上查了好久才找到的,找的dropdown.js和dropdown.css都是v2.3.5版本的。

(PS:如果谁有需要的话点击这里可以获取,大概率没人用的上了,哈哈 ) [](通过网盘分享的文件:layui下拉dropdown的js和css 链接: pan.baidu.com/s/1L9fGlKej... 提取码: g4vf)

引入和配置

接下来就是在项目中将css和js引入进来,并进行配置了,引入进来以后,可以在LayUI.js中进行如下配置

这样进行配置以后,在你需要使用的页面只引入LayUI.js就行了。

然后在页面引入js就不写了,相关代码直接截图给大家看看

然后就是进行渲染和点击下拉控件的内容让它实现不同页面的跳转了。

这里引用一下子,然后下面就能直接进行使用:

这里是给按钮带上列表数据的主键id,方便后续进行操作

然后下面就是js进行判断它是哪种类型的,然后进行不同的操作,使用LayUI的layEvent去判断:

最后,我们看看效果如何:

实战中的坑远不止这些:

  1. 动态渲染陷阱 :数据变化后必须 dropdown.reload('id') 刷新
  2. 位置校准 :在滚动容器内需设置 position: 'absolute'
  3. 样式穿透 :用 customClass 参数覆盖默认样式
  4. 浏览器兼容:IE 下需额外 polyfill 处理阴影效果

如今看来,其实Layui Dropdown 的设计依然精妙:

尽管现在 Vue/React 组件库大行其道,但在传统 jQuery 项目中,Layui Dropdown 仍是最轻量的解决方案。当我在遗留系统中看到它依然流畅运作时,总会想起那个加班的深夜------好的工具不会被技术潮流淹没,它总在特定场景里默默闪光。感觉好像就是这么个道理!哈哈,今天的分享就到此结束!

相关推荐
加蓓努力我先飞20 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端20 小时前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一20 小时前
vite框架下大屏适配方案
前端·vue.js·响应式设计
有点笨的蛋20 小时前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
文心快码BaiduComate20 小时前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员
社恐的下水道蟑螂20 小时前
用CSS3拍一部《星球大战》片头?前端导演的"原力"修炼指南
前端·javascript
子非鱼37320 小时前
git 常用命令行
前端
Tzarevich20 小时前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css
BBB努力学习程序设计20 小时前
CSS复合选择器
前端·html
西洼工作室21 小时前
Strapi快速入门:从安装到API开发
前端·后端