Avue源码修改（一）图层组合成组文件夹保持在原位置

文件夹成组源码：

//文件夹成组逻辑
    handleCompose () {
      let list = this.contain.active;
      this.$confirm(`是否组合所选择的图层?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let floder = createFile()
        //查找到每个组件调用核心方法进行组合操作
        //寻找父类
        const params = this.contain.findnav(list[0], true);
        list.forEach(ele => {
          const item = this.contain.findnav(ele, true);
          item.parent.splice(item.count, 1);
          floder.children.push(item.obj);
        });
        params.parent.push(floder);
      }).catch(() => { })
    },

此代码对应的操作非常鸡肋，组合成组后文件夹默认添加到最底部，而正常的逻辑应该是保持在选中组合成组的图层位置不变（类似Photoshop里面的图层分组）

通过分析源代码逻辑：

params代表整个图层，params.parent是所有图层列表

item是当前选中的图层，item.count是当前选中图层在总图层中的第几个

修改逻辑：定义一个变量存储选中图层的位置，用splice代替push插入文件夹

这样组合分组后就在原位置了：

 

修改后代码：

//文件夹成组逻辑
    handleCompose () {
      let list = this.contain.active;
      this.$confirm(`是否组合所选择的图层?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let floder = createFile()
        //查找到每个组件调用核心方法进行组合操作
        //寻找父类
        const params = this.contain.findnav(list[0], true);
        let lastCount = 0;//定义变量存储图层位置
        list.forEach(ele => {
          const item = this.contain.findnav(ele, true);
          lastCount = item.count;//当前选中的图层位置
          item.parent.splice(item.count, 1);
          floder.children.push(item.obj);
        });
        params.parent.splice(lastCount, 0, floder);//在指定位置添加文件夹
        // params.parent.push(floder);
      }).catch(() => { })
    },