layui穿梭框内容溢出解决办法

2021-11-18 17:32:04 阅读：206 来源： 互联网

标签：解决办法 title layui elem value height 穿梭 outerHeight

今天在弄穿梭框的时候，发现内容溢出，如下图所示：

设置代码如下：

layui.use(['transfer', 'form', 'layer','util'], function () {
        var form = layui.form
          , layer = layui.layer
          , transfer=layui.transfer
          , util=layui.util ;        

        //模拟数据
        var data1 = [
          {"value": "1", "title": "李白"}
          ,{"value": "2", "title": "杜甫"}
          ,{"value": "3", "title": "苏轼"}
          ,{"value": "4", "title": "李清照"}
          ,{"value": "5", "title": "鲁迅", "disabled": true}
          ,{"value": "6", "title": "巴金"}
          ,{"value": "7", "title": "冰心"}
          ,{"value": "8", "title": "矛盾"}
          ,{"value": "9", "title": "贤心"}
          ,{"value": "10", "title": "巴金"}
          ,{"value": "11", "title": "冰心"}
          ,{"value": "12", "title": "矛盾"}
          ,{"value": "13", "title": "贤心"}
        ]

        transfer.render({
          elem:'#demo',
          title:['待选角色','已选角色'],
          data:data1,
          id:'transferbox_item',          
          //showSearch: true,
          height: 300 //定义高度

        });
      });

发现不设置showSearch为true的时候，也就是不显示搜索框的时候，内容会溢出，显示搜索框的时候，内容不会溢出。

于是查看了一下transfer.js的代码，发现内容框的高度是通过js设定的，在设置内容框高度的时候，与搜索框的高度有关，但此时无搜索框，获取不了搜索框的高度，于是代码就出现了bug。

源代码如下所示：

x.prototype.render = function() {
        var e = this,
        n = e.config,
        i = e.elem = a(t(v).render({
            data: n,
            index: e.index
        })),
        l = n.elem = a(n.elem);
        l[0] && (n.data = n.data || [], n.value = n.value || [], e.key = n.id || e.index, l.html(e.elem), e.layBox = e.elem.find("." + s), e.layHeader = e.elem.find("." + u), e.laySearch = e.elem.find("." + h), e.layData = i.find("." + y), e.layBtn = i.find("." + f + " .layui-btn"), e.layBox.css({
            width: n.width,
            height: n.height
        }), e.layData.css({
            //在此设置内容框的高度
            height: function() {         
                //e.laySearch.outerHeight()为搜索框的高度       
                return n.height - e.layHeader.outerHeight() - e.laySearch.outerHeight() - 2
            } ()
        }), e.renderData(), e.events())
    },

于是稍改代码，做了一个空判断，即可正确显示内容框的高度，如下所示：

　　　　　　e.layData.css({
            //在此设置内容框的高度
            height: function() {            
                //e.laySearch.outerHeight()为搜索框的高度
                return n.height - e.layHeader.outerHeight() - (e.laySearch.outerHeight()||0) - 2
            } ()
        })

标签：解决办法,title,layui,elem,value,height,穿梭,outerHeight
来源： https://www.cnblogs.com/Insist-Y/p/15573422.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

layui穿梭框内容溢出解决办法