Eden.Sun 发表于 2024-8-26 15:06:23

【GEDS-15824】仪表板弹框的关闭按钮事件

本帖最后由 KarenGao 于 2024-10-22 16:03 编辑

场景描述:

客户集成仪表板。仪表板设置了跳转,跳转到其他仪表板。同页面中,客户有显示一段文本内容的标签,通过css代码设置了显示层级。这就导致,文字内容始终悬浮在仪表板组件上面。不好看:




需求:
建议早呢更加弹框的出现和关闭事件的监听。方便与外部交互。

KarenGao 发表于 2024-10-22 16:04:06

您好,这是高级分析查看器和标准版查看器的一个demo。
仪表板实例初始化后,用户可以监听事件(show.modal / hide.modal)
const appConfig: IAppConfig = {
    ...config,
    ...global.wynbi,
    token,
};
const ins = global.WynBi.create('DashboardViewer', appConfig);
ins.initialize({
    container: document.querySelector('#root'),
}).then(() => {
    ins.on('show.modal', (e) => {
      console.log('>>> show modal', e);
    });

    ins.on('hide.modal', (e) => {
      console.log('>>> close modal', e);
    });
});

// lite

const appConfig: IAppConfig = {
    ...config,
    ...global.wynbi,
    token,
};
const ins = global.WynBi.createViewerLite(appConfig);
const container = document.querySelector('#root');
const dom = document.createElement('div');

dom.className = 'dashboard-container';
container.appendChild(dom);
ins.initialize({
    container,
}).then((dash) => {
    // ...connect UIDashboard
    ins.on('show.modal', (e) => {
      console.log('>>> show modal', e);
    });

    ins.on('hide.modal', (e) => {
      console.log('>>> close modal', e);
    });
}, (err) => {
    console.log(err);
});
页: [1]
查看完整版本: 【GEDS-15824】仪表板弹框的关闭按钮事件