layui 优化 button 按钮和弹出框的方法

作者:霁月时间:2026-10-22 17:05:56浏览:400

本文介绍如何在 layui 框架下优化按钮组的视觉紧凑度及弹出层交互体验。通过调整按钮间距解决压缩后显示异常问题,并利用 layer.open 配置参数实现点击触发详情弹窗,展示活动信息。

layui 按钮布局优化

在默认状态下,layui 界面中通常包含三个 button 按钮。

layui 按钮布局优化

当代码经过压缩处理后,按钮的显示效果可能会发生变化。

layui 按钮布局优化

具体实现的代码如下所示。


<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">删除活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">关闭活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">开启活动</button>

为了优化显示效果,建议为每个 button 元素添加适当的空字符或间距调整。


<a><button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button><a>

优化后的界面效果如图所示。

layui 按钮布局优化

弹出层交互实现

当用户点击“点击查看”链接时,系统将触发弹出框以展示详细信息。

layui 按钮布局优化

相关的 HTML 结构代码如下。


<td class='mouse-over-out' data-content="适用门店:{$activity.store_count}个 <hr> 活动主题:{$activity.activity_theme} <hr> 卡券ID:{$activity.wechat_card_id} <hr>"><a style="color:red;" href="#" rel="external nofollow" >点击查看</a></td>

配套的 JavaScript 逻辑代码如下。


 //显示活动详情
  $('.mouse-over-out').click(function(){
   layer.open({
    title: '活动详情',
    type: 1,
    skin: 'layui-layer-demo', //样式类名
    closeBtn: 0, //不显示关闭按钮
    anim: 2, //弹出层样式
    shadeClose: true, //开启遮罩关闭
    area: ['20%', '30%'],
    content:"<div style='height:90%;width:90%;margin:0 auto;margin-top:5%;'><p style='line-height:1%;'>"+
    $(this).data('content')+
    "<p/></div>"
   });
  });

以上关于 layui 优化 button 按钮和弹出框的方法分享完毕,希望能对读者有所帮助,也欢迎大家继续支持本站。

作者最新文章