【WEB前端开辟】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 开启该代码可制止点击该按钮封闭
            }
        });

结果:

引荐:layui教程

以上就是layui前端碰到的难点鸠合(附代码)的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注