rain
102 lines
3.6 KiB
JavaScript
102 lines
3.6 KiB
JavaScript
/**
|
|
* @Name: 基于layui
|
|
* @Author: 潘晨晨
|
|
* 最近修改时间: 2021/04/22
|
|
*/
|
|
|
|
layui.define(['jquery'],function(exports){
|
|
var $ = layui.jquery;
|
|
|
|
var obj ={
|
|
init:function(element){
|
|
//默认
|
|
element.data = element.data || [ {name:'暂无数据'}]
|
|
element.rows = element.rows || 1
|
|
element.moreUpText = element.moreUpText || '更多'
|
|
element.moreDownText = element.moreDownText || '收起'
|
|
element.href = element.href || false
|
|
element.herfBlank = element.herfBlank?'_blank':'_self'
|
|
element.themeColor = element.themeColor || 'green'
|
|
element.size = element.size ? 'layui-btn-'+element.size :'layui-btn'
|
|
|
|
var html;
|
|
var box = $(element.elemId);
|
|
var boxHeight ;
|
|
var itemHeight ;
|
|
var flag = true; // 如果外面包裹了pack的变false
|
|
var dyc = false;
|
|
box.addClass('box-item-pcc');
|
|
element.data.forEach(e=>{
|
|
boxHeight = box.height();
|
|
itemHeight = $('.item-pcc').outerHeight(true);
|
|
element.href ? html = '<a class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'" href="'+element.href+'?id='+e.id+'" target="'+element.herfBlank+'">'+e.name+'</a>':html = '<span class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'">'+e.name+'</span>'
|
|
if((boxHeight>itemHeight*element.rows) && flag){
|
|
morePosition();
|
|
flag =false;
|
|
}
|
|
box.append(html);
|
|
})
|
|
|
|
|
|
boxHeight = box.height();
|
|
itemHeight = $('.item-pcc').outerHeight(true);
|
|
|
|
if(boxHeight>itemHeight*element.rows){
|
|
more(); //第一次渲染页面
|
|
dyc =true
|
|
}
|
|
|
|
|
|
$(document).on('click','#more-pcc',function(){ //点击更多
|
|
more()
|
|
})
|
|
|
|
function morePosition(el){
|
|
if(flag){
|
|
if(el&&dyc){ //如果不是第一次渲染并且
|
|
box.find('#more-box-pcc').remove();
|
|
}
|
|
else{
|
|
$('.item-pcc').wrapAll("<span class='pack-pcc'></span>")
|
|
}
|
|
var list = $('.pack-pcc .item-pcc').eq(-3);
|
|
list.before('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+' " id="more-pcc">'+element.moreUpText+'</a></span>');
|
|
|
|
}
|
|
}
|
|
|
|
function more(){
|
|
if(box.height()>itemHeight*element.rows){
|
|
box.css('height',itemHeight*element.rows);
|
|
morePosition(true)
|
|
}else{
|
|
box.css('height','auto');
|
|
box.find('#more-box-pcc').remove();
|
|
box.append('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+'" id="more-pcc">'+element.moreDownText+'</a></span>');
|
|
flag = true;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
var $style = $('<style type="text/css">\
|
|
.box-item-pcc { overflow: hidden; display: inline-block; width: 70%;} \
|
|
.box-item-pcc .item-pcc { margin:0 5px 5px 5px; box-sizing: border-box; display: inline-block; }\
|
|
.box-item-pcc .more-pcc { float: right; background: none; }\
|
|
.box-item-pcc a { cursor: pointer; }\
|
|
.layui-font-red{color:#FF5722!important}\
|
|
.layui-font-orange{color:#FFB800!important}\
|
|
.layui-font-green{color:#009688!important}\
|
|
.layui-font-cyan{color:#2F4056!important}\
|
|
.layui-font-blue{color:#01AAED!important}\
|
|
.layui-font-black{color:#000!important}\
|
|
.layui-font-gray{color:#c2c2c2!important}\
|
|
</style>');
|
|
$($('head')[0]).append($style);
|
|
|
|
exports('moreMenus',obj);
|
|
});
|
|
|