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

桃扇骨 2022-12-23 06:57 78阅读 0赞

操作前进、后退操作，这个功能比较重要，而且必须提前设计后，不然后面再来兼容这个功能就比较麻烦。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]  
这里只对dom的增加、删除等渲染进行前进、后退操作，考虑到web到性能，不对属性操作进行前进、后退。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]

*  点击后退，堆栈操作  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 2]
 *  点击前进，逆向操作堆栈而已。
 *  第一步申明了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);
        },

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8c16dd5704be43008da60b6b32e3682d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201123170306662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201123171607822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70#pic_center