开源一夏 | 使用 layui 框架实战之栅格系统和菜单评分组件运用心得

作者：黎燃

2022 年 8 月 23 日
内蒙古
本文字数：2301 字
阅读完需：约 8 分钟

layui 的优缺点详解

优点：Layui 作为国内开源的前端 UI，简单易用，界面简单美观。目标对象是对前端不太了解的后端开发人员，它也适用于后端开发人员。（1） Layui 是一个轻量级框架，简单而美观。适用于后端模式的开发，对服务器页面有很好的效果。（2） Layui 是后端开发人员的最佳 UI 框架。它由 Dom 驱动。只要不涉及交互，layui 仍然很好缺点：因为 layui 是一个个人开源项目，开源时间不长，所以会有很多 bug 和一些限制。兼容性不强，尤其是在移动端。由于最初的设计意图，layui 仅适用于小型项目。即使是小项目也经常遇到许多问题。官方网站对更好的集成技术收费。

栅格系统

1.使用 layui 行定义行，例如，<div class=“layui row”></div>2.使用像 layui col MD 这样的预设类来定义一组列并将它们放入行中。其中：变量 MD 表示不同屏幕下的标记（可选值见下文）变量表示该列占用的 12 个等分（例如 6/12）。可选值为 1-12 如果多列的“平分线值”之和等于 12，则该行刚好满。如果大于 12，额外列将自动开始新行。3.该栏可以同时有四种不同的组合，即：XS（超小屏幕，如手机）、Sm（小屏幕，例如平板电脑）、MD（桌面中屏幕）和 LG（桌面大屏幕），以呈现更动态和灵活的布局。4.可以向列中添加诸如 layui-col-space5 和 layui-col-md-offset3 等预设类，以定义列的间距和偏移。5.最后，在 column 元素中放置自己的任意元素，以填充内容并完成布局！

<body>    <div class="layui-container">      <!-- 定义行-->      <div class="layui-row">        <!-- 定义列 -->        <div class="layui-col-md5" style="background-color: #007DDB;">          内容5/12        </div>        <div class="layui-col-md7" style="background-color: #00F7DE;">          内容7/12        </div>      </div>      <div class="layui-row">        <!-- 定义列 -->        <div class="layui-col-md4" style="background-color: #EB7350;">          内容4/12        </div>        <div class="layui-col-md4" style="background-color: #FFB800;">          内容4/12        </div>        <!-- 超过12会自动换行 -->        <div class="layui-col-md6" style="background-color: #C2C2C2;">          内容6/12        </div>      </div>      <div class="layui-row">          <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: pink;">            移动：6/12 | 平板：6/12 | 桌面：4/12          </div>          <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: palegoldenrod;">            移动：6/12 | 平板：6/12 | 桌面：4/12          </div>          <div class="layui-col-xs4 layui-col-sm12 layui-col-md4" style="background-color: peru;">            移动：4/12 | 平板：12/12 | 桌面：4/12          </div>          <div class="layui-col-xs4 layui-col-sm7 layui-col-md8" style="background-color: powderblue;">            移动：4/12 | 平板：7/12 | 桌面：8/12          </div>          <div class="layui-col-xs4 layui-col-sm5 layui-col-md4" style="background-color: palegreen;">            移动：4/12 | 平板：5/12 | 桌面：4/12          </div>        </div>    </div>  </body>

复制代码

按钮

名称组合原始 class=“layui BTN layui BTN main”默认类＝“layui BTN”野生类＝“layui BTN layui BTN 正常”暖色类＝“layui BTN layui BTN 暖”警告等级＝“layui BTN layui BTN 危险”使残废 Class=“layui BTN layui 禁用 BTN”

菜单

菜单是页面的基本元素。我们希望它是通用的，所以它的结构非常灵活。事实上，在基本菜单正式推出之前，垂直导航（layui 导航树）已经取代了它的角色，尤其是在管理系统中。虽然它们在本质上都属于“菜单”的范畴，但我们同意，水平菜单称为“导航”，垂直菜单称为正统的“基本菜单”。它将非常有用，可以在许多业务场景中看到。

可依赖的模块：dropdown

列表类型及其子菜单是相同的。需要注意的是，“可收缩菜单组”的子菜单只需要嵌套一层 UL；“水平父子菜单”还需要一组 div class=“layui panel”和“layui menu body panel”，以使子菜单更加清晰。

<li lay-options="{  id: 100  ,title: 'menu item 1'  ,type: '' //支持的类型有：group、parent，具体用法参见上文  ,aaa: '任意参数'}">内容</li>

复制代码

评分组件

费率评分组件在电子商务和 o2o 平台中特别常见，通常用于评估商家的服务满意度。外形依然小巧自然，功能依然灵活实用。对应于分数的用户定义的内容功能可以给它更多的播放空间。此组件是 2.3.0 版中的新组件。

关闭半星功能：如果十进制值大于 0.5，则分数将向上取整。例如，如果分数为 3.6，系统将自动将其更改为 4 小于或等于 0.5 的小值：分数向下舍入，例如 3.2 分，系统将自动变为 3 分如果在关闭半星函数的同时打开文本，将发现的分数将相应地变为整数打开半星功能：无论的十进制值是 0.1 还是 0.9，都统一计划为 0.5。打开文本时，可以看到的分数没有变化。

settex

settext 函数在首次呈现和单击组件时生成回调。我们的默认文本以星形显示。可以根据自己的文本替换我们的默认文本，例如“恨”和“喜欢”。如果用户在没有设置相应文本的情况下选择分数，系统将使用我们的默认文本

rate.render({  elem: '#test1'  ,setText: function(value){    var arrs = {      '1': '极差'      ,'2': '差'      ,'3': '中等'      ,'4': '好'    };    this.span.text(arrs[value] || ( value + "星"));  }});

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/98d01681edb7786bccd8d8003】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

开源一夏 | 使用 layui 框架实战之栅格系统和菜单评分组件运用心得

layui 的优缺点详解

栅格系统

按钮

菜单

评分组件

settex

黎燃

评论