vue-drag-resize 可拖拽可缩放的标签,如何管理多个拖拽元素之间的zIndex?操作上需要保持当前激活的组件是最上层,但是在总体上,又要确保其图层管理的顺序。
麻烦总是不断出现,还好办法总比困难多,
1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可以实现元素的拖拽,缩放,记录位置等等,如下:
2.组件好用,有各种事件,参数,属性可以使用,但是也遇到了一个麻烦事,各个标签之间,如何管理多个拖拽元素之间的zIndex?拖拽过程中这是必定会遇到并且无法逃避的一个问题,操作上需要保持当前激活的组件是最上层,但是在总体上,又要确保其图层管理的顺序。维护zIndex,并且注意在删除与置换层级的时候对应的数据修改。
3.试着采用:一个变量记录点击次数,借用点击次数,每点击一次就把当前标签的z-index增大至点击次数 对应的数字,这样就能保证最后点击那个标签都会在最顶端,z-index都会最大,
4.但是事与愿违,此组件点击之后默认不能对属性的修改立刻重现,需要点击一下,再点一下,才可以达到要求
5.无形中大大降低了使用体验
==========================================================================
解决:使用 @activated =“” 激活事件,加ref属性(激活事件参数里找不到实例对象),在组件激活时找到对应实例对象,更改标签zindex。搭配@clicked=““点击事件同时使用,即可