vue使用leader-line 遇到的问题:z-index，线条滚动，隐藏，删除

一、存在问题：

【1】线条会随着滚动条一起滚动；

【2】线条SVG存在在多地方引用，存在罩层问题，或者遮挡问题，设置z-index无效

二、解决思路：

1、【1】问题解决办法：

a、可以用transform: scale(0.8) CSS样式来缩小画布，达到取消滚动条的目的

示例代码：

transform: scale(0.8);

-moz-transform: scale(0.8); /* Firefox */

-webkit-transform:scale(0.8); /* Safari and Chrome */

-ms-transform:scale(0.8);

b、采用问题【2】的办法，通过移动SVG到里层，自定义发挥了

c、加入滚动条监听，并使用自定义position()方法：

leader_line.position()； 备注：leader_line为线条预设自定义的变量

2、【2】问题问题阐述及解决办法：

阐述：

leader-line，默认生成在最外层body下，如果业务存在多层，且存在多个地方引用时，就无法用全局样式z-index来控制外层显示，比如弹窗，页面线条设置z-index：1，弹窗部分线条设置z-index：999，当关闭弹窗时，z-index就会变成最高值，如果再打开其他弹窗，那么线条会线上在弹窗之上，无法再通过z-index控制；

解决办法：

可以把外层svg拷贝到需要的DIV里面，并删除最外层svg；用这种方法能解决很多问题。

二、其他知识点：

1、移除线条：leader_line.remove()

2、显示线条：leader_line.show()

3、隐藏线条：leader_line.hide()

PS：有其他问题也可以留言，说不定做项目过程中也遇到过