layui 的前端遇到的难点集合

分享 未结 精帖
32 3312
Jasmine_w
Jasmine_w 2018-11-27
悬赏:20飞吻
自从今年2018年3月份开始认识到layui框架之后,就爱不释手,但是有时也挺抓狂的,做前端页面的时候遇到各种问题,下面是我总结平常经常碰到的问题集合,如果大家遇到的时候有其他办法解决的欢迎补充一下,谢谢,仅供大家参考学习~~
一.表格中插入下拉框的情况
问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:


1.表格中下拉框被隐藏----方法1
这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最下面的表格的下拉框展开之后会撑开表格的滚动条显示出来,可以看到截图效果:


这个办法只是简单是修改了一下css:
.layui-table-cell{overflow: visible;}
2.表格中下拉框被隐藏----方法2
第二种办法就是给下拉框加上这个属性:lay-ignore.忽略了美化效果自然就是普通的下拉框了,可以正常显示的,但是效果并不美观,你觉得不是你想要的,别急,我给它美观一下.
首先给select表单加了lay-ignore属性,这样子就变成普通的表单了.
再美化一下css改变效果:
 .table_select { width: 100%; height: 38px;
line-height: 1.3;
line-height: 38px \9;
border-width: 1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
border-radius: 2px;
padding-left:10px;
}
.table_select option{
padding: 0 10px;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
/*修改表单默认文字颜色*/

input, textarea,select {
color: #999; /* 光标的颜色*/
text-shadow: 0px 0px 0px #999; /* 文本颜色 */
-webkit-text-fill-color: transparent; }
input::-webkit-input-placeholder,select::-webkit-input-placeholder { color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */ text-shadow: none; -webkit-text-fill-color: initial; }
效果如下:


大家可以看到效果了,只是默认效果跟原来的差不多一样,只是点击效果内容有点丑,也勉强接受..

3.表格中下拉框被隐藏----方法3

参考:@FIRSTK 的bootstrap下拉菜单组件 https://fly.layui.com/jie/20494/

由于这个版本当时是layui-v2.24版本的,现在插件已经到2.4.5了,做的时候同步就有点麻烦,所以要切换成旧版本的.

bootstrap下拉菜单效果如果,需要的也可以用:
 <div class="layui-btn-dropdown">
<button type="button" class="layui-btn layui-btn-sm" data-toggle="dropdown">操作 <span class="layui-icon" style="font-size: 14px"></span></button>
<ul class="layui-dropdown-menu">
<li><a href="#" onclick="alert(2)">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li><!--分割线-->
<li><a href="#">分离的链接</a></li>
</ul>
</div>
效果如下:


二.弹窗中下拉框显示被隐藏1.当弹窗高度不够的时候,这个就有问题了

解决办法:

①修改全局css
.layui-layer-page .layui-layer-content { overflow: visible !important; }
②修改当前的弹窗的css,给弹窗加个id,比如#layer_pop;这样不影响其他的弹窗效果.
#layer_pop.layui-layer-content { overflow: visible !important; }
layer.open({
id:'layer_pop',
type: 1,
title: '点击弹窗',
area: '640px',
shadeClose: true, //点击遮罩关闭
content: $('#clickBtnView'),
btnAlign: 'c'
, zIndex: 198910160
, btn: ['确定', '取消']
, yes: function (index, layero) {
//按钮【按钮一】的回调

layer.close(index);
}
, btn2: function (index, layero) {
//按钮【按钮二】的回调
if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时,该层才会关闭
layer.close(index)
}
// return false //开启该代码可禁止点击该按钮关闭
}
, cancel: function (index, layero) {
//右上角关闭回调

//return false 开启该代码可禁止点击该按钮关闭
}
});
效果:


后续有其他的还会继续更新~~

上述效果查看链接: http://www.jianbaizhan.com/upload/file/20181122/5bf65e6fd58f4/index.html
回帖
  • huahu
    2018-11-27
    表头城市怎么弄select,然后过滤筛选?
    1 回复
  • 安度英年
    2018-11-27
    谢谢总结,确实是大家需要的。
    只是lay-ignore的方式 还是不能完美,不知道小贤能不能解决这个问题
    0 回复
  • Jasmine_w
    2018-11-27
    @huahu [思考] 表头还没试过,只是大部分都是在表格内容中插入的下拉
    0 回复
  • Jasmine_w
    2018-11-27
    @安度英年[挤眼] 不客气
    0 回复
  • naturalpride
    2018-11-27
    @Jasmine_w sssss
    0 回复
  • Apple333
    2018-11-28
    没有下载地址码[可怜]
    0 回复
  • Apple333
    2018-11-28
    @Jasmine_w

    .layui-btn-dropdown {
    position: relative;
    display: inline-block;
    }
    .layui-btn-dropdown .layui-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    margin: 2px 0 0;
    padding: 5px 0;
    min-width: 120px;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    list-style: none;
    text-align: left;
    font-size: .875rem;
    -webkit-background-clip: padding-box;

    }
    这是layui自带的吗?
    0 回复
  • Jasmine_w
    2018-11-28
    @Apple333 这个是的,下载地址: http://www.jianbaizhan.com/code/834
    0 回复
  • 这几点总结的似乎我都遇到过[good]
    0 回复
  • Jasmine_w
    2018-11-28
    @码完才准走 [嘻嘻] 那你有没其他解决办法,也可以分享出来喔,我做了几个后台的前端都遇到过,所以就花点时间总结一下,方便下次查看[害羞]
    0 回复
  • 我获取下拉框的值 比如我要获取第二个下拉框的值 只返回第一个下拉框所选中的这是怎么回事啊
    0 回复
  • Jasmine_w
    2018-11-28
    @刚入门萌新 [可怜] 不好意思呀,这个我不大懂,数据相关的我不会,建议发表一条问题提问一下,群里很多大神可以帮你解决
    0 回复
  • [泪]
    0 回复
  • 木子ya
    2018-11-28
    layui table的行内编辑,校验出输入的值不符合要求,怎样返回之前的值呀??
    0 回复
  • 是我要用到的了,真好[太开心]
    0 回复
  • 最后一个layer下拉框的,type设成6,也能解决
    0 回复
  • Jasmine_w
    2018-11-29
    @小卖铺的老爷爷 确实是可以的,因为type类型只有4种,你说的6是不存在的, https://www.layui.com/doc/modules/layer.html#type 下拉框确实是可以正常显示的.但是
    这里会有点问题是报错吗
    0 回复
  • @Jasmine_w 不知道你这是什么情况,我这里是没有报错的
    0 回复
  • miss刘
    2018-11-30
    在表格内加入下拉框显示是可以显示出来也overflow:visible了结果又出来一个问题就是出现了一个table外的横向滚动条咋整啊[挖鼻]
    0 回复
  • Jasmine_w
    2018-11-30
    @miss刘 你用这种办法解决是有滚动条出来的,暂时没想到办法解决这个问题[微笑] 这个办法解决本来就有缺点文章也说明了[可爱]
    0 回复
  • miss刘
    2018-11-30
    好的 我只是请教一下 看看有没有办法解决[哈哈]
    0 回复
  • Jasmine_w
    2018-11-30
    @miss刘[兔子] 没事,我也期待大家有其他更好的解决办法可以分享出来,互相学习嘛
    0 回复
  • @Jasmine_w 那是因为你绑定的id选中的是一个对象,所以会有【object object】 你应该在外面套一层,然后content:$('#XXX').html()
    0 回复
  • Jasmine_w
    2018-12-3
    @手写的从前1326 [抱抱] 好的,谢谢
    0 回复
  • SAMA
    2018-12-3


    下拉框调了宽度,然后下拉的数据宽度还是没变,可以调吗?
    0 回复
  • Jasmine_w
    2018-12-3
    @SAMA 你是不是只是想修改下拉效果宽度短一些呢?
    你上面的css不需要写,加一句js:
    $('.selectWd').next('.layui-form-select').css("width","95%")
    html:
    <select name="city" lay-verify="required" class="selectWd">
    <option value=""></option>
    <option value="0" selected>北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    </select>
    加个类控制selectWd
    0 回复
  • sztoshen
    2018-12-4
    弹框是iframe的怎么解决?
    0 回复
  • Jasmine_w
    2018-12-4
    @sztoshen iframe模式的,暂时还没好的办法解决,你先加大弹窗内容的高度处理
    0 回复
  • SAMA
    2018-12-4
    @Jasmine_w 不好意思,再详细问下

    我将input宽度调窄了,然后导致下拉的数据宽度还是原来的样子,我想和我调过和的input宽度一致,但是图片这样操作没有效果,麻烦再看下呢
    0 回复
  • Jasmine_w
    2018-12-4
    @SAMA
    我这边修改了没问题的,不知道你那边是不是改错了哪个影响到了.

    0 回复