vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

麻烦总是不断出现，还好办法总比困难多，

1.公司开发一款可视化编辑html网页的多媒体编辑平台，牵扯到标签元素的拖拽，缩放，我找了找方法发现原生技术实现起来代码太多，麻烦，还好找到了一个vue组件，可以实现元素的拖拽，缩放，记录位置等等，如下：

2.组件好用，有各种事件，参数，属性可以使用，但是也遇到了一个麻烦事，各个标签之间，如何管理多个拖拽元素之间的zIndex？拖拽过程中这是必定会遇到并且无法逃避的一个问题，操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。维护zIndex，并且注意在删除与置换层级的时候对应的数据修改。

3.试着采用：一个变量记录点击次数，借用点击次数，每点击一次就把当前标签的z-index增大至点击次数 对应的数字，这样就能保证最后点击那个标签都会在最顶端，z-index都会最大，

4.但是事与愿违，此组件点击之后默认不能对属性的修改立刻重现，需要点击一下，再点一下，才可以达到要求

5.无形中大大降低了使用体验

==========================================================================

解决：使用 @activated ="" 激活事件，加ref属性（激活事件参数里找不到实例对象），在组件激活时找到对应实例对象，更改标签zindex。搭配@clicked=""点击事件同时使用，即可

 

js：

　　点击事件(e) {  

      this.点击次数 += 1;  

      e.target.style.zIndex = this.点击次数; 

    },

    激活事件(item) {   

      this.点击次数 += 1;  

      this.$refs[item][0].$el.style.zIndex = this.点击次数; 

    },