layui 第三方组件平台

返回首页 发布组件

设置行数,超出隐藏

创建:2021-5-2

文档

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.layui.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.layui.com/',
herfBlank:true,
themeColor:'black',
size:'sm'
})


});
</script>