layui的layer.js弹窗共用方法

// 通用iframe嵌入层弹窗函数
/**
 * @param {String} width 弹出层宽度(可缺省,默认:1200px)
 * @param {String} height 弹出层高度(可缺省,默认:800px)
 * @param {String} title 弹出层左上角标题(可缺省,默认:数据展示)
 * @param {String} iframeUrl iframe地址(必选)
 * @return {Number} layer的唯一标识索引:index
 */

/**
 * 调用示例:
 * 
  let layer_data = {
   width: '300px',
   height: '300px',
   title: '打开弹窗',
   iframeUrl: 'http://192.168.2.112:81/#/history-index?port=81&ip=192.168.2.112&tdsIP=192.168.2.112&2ndPort=null&station=null',
  } 
  publicIframeLayer(layer_data)
*/
function publicIframeLayer({ width = '1200px', height = '800px', title = '数据展示', iframeUrl }) {
 return layer.open({
  type: 2,
  anim: 5,
  shade: 0,
  resize: true,
  title: title,
  area: [width, height],
  maxmin: true, // 允许全屏最小化
  moveOut: true, // 允许拖拽到窗口外
  content: iframeUrl,
  zIndex: layer.zIndex,
  skin: 'demo-layer-class',
  success: (layero, index) => {
   try {
    layer.setTop(layero)
   } catch (error) {}
  },
 })
}

// 访问外层layer打开,解决多层嵌套时弹窗层叠的问题
function parentPublicIframeLayer({ width = '1200px', height = '800px', title = '数据展示', iframeUrl }) {
 return window.parent.layer.open({
  type: 2,
  anim: 5,
  shade: 0,
  resize: true,
  title: title,
  area: [width, height],
  maxmin: true, // 允许全屏最小化
  moveOut: true, // 允许拖拽到窗口外
  content: iframeUrl,
  zIndex: layer.zIndex,
  skin: 'demo-layer-class',
  success: (layero, index) => {
   try {
    layer.setTop(layero)
   } catch (error) {}
  },
 })
}

// 通用界面层弹窗函数
/**
 * @param {String} width 弹出层宽度(可缺省,默认:1200px)
 * @param {String} height 弹出层高度(可缺省,默认:800px)
 * @param {String} title 弹出层左上角标题(可缺省,默认:数据展示)
 * @param {String} htmlContent html内容(必选)
 * @return {Number} layer的唯一标识索引:index
 */

/**
 * 调用示例(父级id对应的元素必须设置为style="display:none;"):
 * 
 *<div id="test_layer" style="display:none;">
   <span>11111</span>
  </div>
  
  let layer_data = {
   width: '300px',
   height: '300px',
   title: '打开弹窗',
   htmlContent: $('#test_layer'),
  } 
  publicHtmlLayer(layer_data)
*/

function publicHtmlLayer({ width = '1200px', height = '800px', title = '数据展示', htmlContent }) {
 return layer.open({
  type: 1,
  anim: 5,
  shade: 0,
  resize: true,
  title: title,
  area: [width, height],
  maxmin: true, // 允许全屏最小化
  moveOut: true,
  content: htmlContent,
  skin: 'demo-layer-class',
  zIndex: layer.zIndex,
  success: (layero, index) => {
   try {
    layer.setTop(layero)
   } catch (error) {}
  },
 })
}

export { publicIframeLayer, publicHtmlLayer, parentPublicIframeLayer }

 

posted @ 2025-07-17 10:42  yw3692582  阅读(12)  评论(0)    收藏  举报