leader-line.js 使用模态窗口时出现问题

Question

需要帮助。我有一个

Answer 1

嗯，你需要在模态打开后绘制引导线。您可以使用引导模式事件来实现此目的。当模态为

shown

时，绘制线条，当模态为

hidden

时，隐藏线条。

这是脚本：

function drawLine(e1, e2) {
    let line = new LeaderLine(
        e1,
        e2,
    );
    line.setOptions({startSocket: 'right', endSocket: 'bottom'});
    line.color = '#999';
    line.startPlug = 'behind';
    line.endPlug = 'behind';
    line.path = 'grid';
    line.size = 1;

    return line;
}

let line1, line2;

const myModalEl = document.getElementById('ChartFlowModal')
myModalEl.addEventListener('shown.bs.modal', event => {
    line1 = drawLine (
        document.getElementById('role-text-1.1'),
            document.getElementById('role-text-1.2')
    );
    line2 = drawLine (
        document.getElementById('role-text-2.1'),
            document.getElementById('role-text-2.2')
    );
})
myModalEl.addEventListener('hide.bs.modal', event => {
    if (line1) {
        line1.remove()
    }
    if (line2) {
        line2.remove()
    }
})

您可以在此处查看工作示例。

它的外观如下：

注意：当模式打开时，您可能还需要重新定位线条。为此用途

line.position()

。