前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

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:有其他问题也可以留言,说不定做项目过程中也遇到过

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言