ivew+vue实现表单设计器--前进后退操作（三）

操作前进、后退操作，这个功能比较重要，而且必须提前设计后，不然后面再来兼容这个功能就比较麻烦。

这里只对dom的增加、删除等渲染进行前进、后退操作，考虑到web到性能，不对属性操作进行前进、后退。

• 添加组件，后退数组操作

• 点击后退，堆栈操作
  

• 点击前进，逆向操作堆栈而已。

• 第一步申明了2个数组，1个对象映射对象

 data() {
    return {
      forwardList:[],
      backwardList:[],
      objMap:{},
    }
  },

核心的前进后退方法大概如下：

    //操作前进
    forwardBtn(){
      let preRendKey=this.forwardList.pop();
      let itemObj=this.objMap[preRendKey];
      //如果存在父节点 则需要找到父节点进行添加操作 如果不存在父节点 则直接操作drawingList
      if(itemObj.parentRendKey!=null&&itemObj.parentRendKey!==""){
       let  prentObj=getObjByRendKey(itemObj.parentRendKey,this.drawingList);
       if(prentObj==null){
         return void(0);
       }
       //将节点放入到子集合中
       if(prentObj.__config__.children==null){
         prentObj.__config__.children=[];
       }
        prentObj.__config__.children.push(itemObj);
      }else{
        this.drawingList.push(itemObj);
      }
      this.backwardList.push(preRendKey);
    },
    //操作回退
    backBtn(){
      let backRendKey=this.backwardList.pop();
      if(backRendKey!=null){
        let delObj=removeObjByRendKey(backRendKey,this.drawingList);
        this.objMap[backRendKey]=delObj;
        this.forwardList.push(backRendKey);
      }
    },
    /**
     * 循环list将其中的rendKey取出来放到backwardList中
     * @param drawingList
     */
    initBackwardList(drawingList){
      addRendKeyToList(this.backwardList,drawingList);
    },

这样就实现了前进后退的大概操作，当然还有些细节，后续再进行优化完善。