前端框架:第二章:Layui(类UI ) 框架:关于2.2.5版本没有rate模块的解决方案

简介: 前端框架:第二章:Layui(类UI ) 框架:关于2.2.5版本没有rate模块的解决方案

有一个月没有写博文了,最近经历了离职,找工作,疫情导致的工作延期,新入职在临港的分公司,搬家到临港,所以一直延期博文更新,也没有学习新知识的时间。然后新入职的这家公司项目没有做前后端分离,也就是从后端到页面数据绑定都是后端的活,前端框架使用的是Layui前端框架。这种框架之前没有在公司用到过,也没有接触过所以,这里系统的学习一下。


官方文档给的很全,网站是https://www.layui.com/doc/ 但看着很杂,所以这里我选择容易上手的案例:


由于公司将layui配置好了,官网也有类似的配置教程,这里我就不重复写了。


这里我主要讲一下layui在工作中遇到的一些版本问题


我公司使用的版本是一个比较老的版本,layui-v2.2.5。而且自己在内部封装了一些js和css,对于最新版本的一些模块可能不支持。


这里我已rate评分为例,在2.2.5的版本和2.5.6版本中对比你可以看到


而2.2.5没有该模块。


这种情况下不能更换版本,又要使用rate模块,怎么办呢?


有几种情况可以尝试,第一种,直接手写一个类似的(不太现实);第二种,扩展一个模块;第三种,集成rate模块。这里我使用第三种。


将rate.js中的代码全部复制,然后去layui.js或者layui.all.js中粘贴代码,具体看你引用的是哪个js,我引用的是layui.all.js,所以在layui.all.js最后粘贴rate.js所有的代码


这只是第一步,还有第二步将rate模块引到layui.all.js里加上rate:'modules/rate'

这个时候虽然引入了js但是还有css没有加上,所以第三步我们去2.5.6版本中找layui.css将rate相关的样式加到2.2.5版本的layui.css中,如果不知道怎么替换,你可以先使用2.5.6的版本去页面看效果,然后F12,查看页面样式,直接复制。


到这一步还没结束,你需要将2.2.5版本的font文件夹中的文件替换2.5.6的



一般的这种文件不会有人编辑,所以可以替换 。

总结一下:layui.css加上新版本样式,layui.js或者layui.all.js加上相应的模块,font文件夹替换成最新版本的

实际使用

相关文章
|
9月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
1159 2
|
12月前
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
2689 0
|
监控 数据可视化 数据挖掘
UI 设计团队协作有妙招!哪类办公软件能拔高效率?
本文介绍了6款适合游戏原画团队的高效协作办公软件,包括板栗看板及5款国外软件。这些软件通过可视化任务管理、灵活的任务分配、强大的文件管理和版本控制、便捷的沟通机制等功能,帮助团队提升创作效率,促进成员间无缝协作,适应不同规模和需求的游戏原画项目。
355 15
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
747 3
|
JSON 缓存 前端开发
SpringBoot的 ResponseEntity类讲解(具体讲解返回给前端的一些事情)
本文讲解了SpringBoot中的`ResponseEntity`类,展示了如何使用它来自定义HTTP响应,包括状态码、响应头和响应体,以及如何将图片从MinIO读取并返回给前端。
1417 3
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
282 13
|
前端开发
前端浮动模块
前端浮动模块
183 0
前端浮动模块
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
1563 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1231
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    553
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    427
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    428
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    539
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    715
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1385
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    308
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1159
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    496