标签换行折叠显示更多 moreMenus - Layui 第三方扩展组件平台

文档

moreMenus.js 文件引入

layui.config({
        base: './js/' 
    }).extend({
        moreMenus: 'moreMenus' 
    });

使用：
data 必填
rows (非必填) 设置从第几行开始折叠默认第一行
moreUpText （非必填）设置展开文字默认显示更多
moreDownText （非必填）设置折叠后的文字默认显示收起
href （非必填）设置点击跳转的地址跳转后默认参数id =
herfBlank (非必填) 设置跳转的target 默认_self 可选_blank
themeColor (非必填) 颜色的肢体设置 red(赤色) 、orange(橙色) 、green(墨绿色（主色调）) 、cyan(藏青色) 、blue(蓝色) 、black(黑色) 、gray(灰色)
size （非必填）大小设置 lg(大型) 、 sm(小型) 、 xs(迷你) 不填有默认

layui.use(['moreMenus'],function(){
    var moreMenus = layui.moreMenus
    moreMenus.init({
        elemId:'#box-item',
        data:data,
        rows:1,
        moreUpText:'更多',
        moreDownText:'收起分类',
        // href:'https://www.layuion.com/',
        herfBlank:true,
        // themeColor:'black', // red(赤色) 、orange(橙色) 、green(墨绿色（主色调）) 、cyan(藏青色) 、blue(蓝色) 、black(黑色) 、gray(灰色)
        // size:'sm'  //layui-btn-lg(大型) 、  layui-btn-sm(小型) 、 layui-btn-xs(迷你)
    })

html 示例：

<body>

 <div id="box-item"></div>
    
</body>
</html>
<script>
    const data =[{ id: 1, name: '果树' },
                { id: 2, name: '杨树' },
                { id: 3, name: '苹果' },
                { id: 4, name: '香蕉' },
                { id: 5, name: '芝麻蕉' },
                { id: 6, name: '酸菜' },
                { id: 7, name: '果树' },
                { id: 8, name: '杨树' },
                { id: 9, name: '杨梅' },
                { id: 10, name: '果汁' },
                { id: 11, name: '橄榄' },
                { id: 12, name: '鲫鱼' },
                { id: 13, name: '奶牛' },
                { id: 15, name: '橄榄' },
                { id: 16, name: '木鱼' },
                { id: 17, name: '水蛭' },
                { id: 18, name: '犀牛' }]
    layui.config({
        base: './js/' 
    }).extend({
        moreMenus: 'moreMenus' 
    });
 
    layui.use(['moreMenus'],function(){
    var moreMenus = layui.moreMenus
    moreMenus.init({
        elemId:'#box-item',
        data:data,
        rows:1,
        moreUpText:'更多',
        moreDownText:'收起分类',
        href:'https://www.layuion.com/',
        herfBlank:true,
        themeColor:'black', 
        size:'sm'  
    })
 
     
    });
</script>

下载

去码云下载

该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。