提供Layui弹窗带页签的Demo写法
文章目录
前言一、展示效果二、详细代码1.代码2.简单释义
总结
前言
之前因为有需求，需要开发Layui的弹出框，同时弹窗框需要支持，页签点击切换内容，特此整理了这一篇文章，提供给需要的人。话不多说，请看展示的效果。
一、展示效果
如果有需要你可以接着看下去，下面我将提供源码，被提供详细分析，希望能便利您的二次开发。
二、详细代码
1.代码
Demo代码如下（示例）：
2.简单释义
layer.open({
type: 1,
title: '弹出框详情',
area: ['40%', '55%'],
content: $('#popupContent'),
success:function(layero, index) {
},
});
});
此处为弹出时间控制弹出大小、弹出框标题、弹出框对应内容；
/*控制标题栏颜色*/
.layui-layer-title{
background-color: deepskyblue;
}
/*控制弹窗与内容直接边距*/
#popupContent .layui-tab{
margin-top: 0;
}
#popupContent .layui-tab-card {
border-width: 0px !important;
border-style: solid;
border-radius: 2px !important;
box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
}
此处为样式控制，控制标签栏内容嵌入弹窗，同时，不受边距线等影响。
// 初始化 ECharts 实例
var chart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '柱状图示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表
chart.setOption(option);
此处为ercharts图生成可根据需要切换成动态数据生成。
总结
有需要的可以直接复制源码使用，采用layui、ercharts、jQuery适用于二次开发，有需要自取，不喜勿喷谢谢，自取之后请帮忙点个赞谢谢。
推荐阅读
您阅读本篇文章共花了：
发表评论