layui admin SPA版本,如何实现tabpage页签切换后的active或者show事件

提问 已结 3 69
不眠的夜
悬赏:20飞吻
版本:layuiAdmin 2.4.5 浏览器:
场景如下:
layuiadmin spa 版本,开启tabpage模式
业务主页面Main 是一个列表,点击 修改 按钮,就打开一个标签展示详情。这时UI上的标签为:
Main 详情01 详情02 详情03
当详情01发生了更改后,如果用户点击Main 则 Main需要捕捉到active或者pageshow事件,然后在Main对应的Modul下实现自定义局部刷新功能。
如果详情01没发生更改,切换到Main时就无需刷新。
如果Main被直接关闭,则直接清空当前需要Main刷新的消息。Main如关闭后再打开,则只监听后续详情页面变更后发出的刷新消息。
同理,详情02,详情03也是一样的逻辑控制。
我看了Index,Admin,View的源码,找到了tabpage的触发点,但是在视图对应的Model下,我不知道怎么去实现active或者show。

这个设计其实最好的是观察者模式,我能做到把刷新消息或事件发送到layui.Index或layui.admin,但是后面的消费方(各个View/Module),不知道怎么去订阅这些消息;

当然,看目前论坛上讨论的做法,是详情01变更后,直接关闭当前页,并且切换到Main页面,然后页面Reload或者模拟点击页面刷新按钮
这种模式对用户体验不太友好,因为详情01变更后,可能不需要关闭当前页的,而且用户也反感直接切换到Main页面上去。

在目前的版本下,我的想法有没有实现的可能?
回帖
  • IDyun
    4天前
    list
     //监听 tabspage 选项卡切换
    layui.element.on('tab(layadmin-layout-tabs)', function(obj){
    admin.submitFlag && admin.events.refresh();//layui.index.render();
    admin.submitFlag = false;
    });
    edit
    // submitFlag  自定义表单提交标志
    form.on('submit(LAY-user-front-submit)', function(data){
    admin.submitFlag = true;
    });
    1 回复
  • IDyun
    4天前
    list
    layui.admin.prevHash = location.hash;
    edit
    location.hash = layui.admin.prevHash;
    还是会切换。
    iframe 版的
    https://fly.layui.com/jie/60498/#item-1574931178722
    0 回复
  • @IDyun
    这个解决还是不友好
    毕竟js要主动切换过去,然后刷新一下
    而且用户tabpage开多了,前一个标签不见得就是list
    比较好的方式还是用户主动切换到list后,UI根据消息按需刷新
    0 回复