ivew+vue实现表单设计器--实现tab多页签的拖拽添加（七）

快来打我* 2022-12-29 09:08 338阅读 0赞

前面实现了table表格的拖拽生成，这里记录下tab标签页的拖拽生成。  
直接上图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
拖拽数据的准备

import getTabPanelTemp from "./getTabPanelTemp";
    import GoingUtils from "../../../utils/goingUtils";
    
    export default {
      __config__: {
        layout: 'tabsItem',
        elTag: 'tabs',
        tagIcon: 'gf-tabs',
        tag:'tabs',
        label: 'tabs',
        layoutTree: true,
        activeTabId:'tab1',
        activeState:false,
        tabCount:2,
        children: [
          getTabPanelTemp('tab1','tab1',GoingUtils.getUUid(32)),
          getTabPanelTemp('tab2','tab2',GoingUtils.getUUid(32)),
        ]
      },
      type: 'default',
    }

拖拽的tab的jsx代码：

import components from "./hoverComBtns";
    import $ from "jquery";
    
    
    function tabsItem(h, currentItem, index, list) {
      const {activeTabId,renderKey} = currentItem.__config__;
      let extClass=currentItem.activeState?'active-from-item':'';
      const className = 'go-tabs-item '+extClass;
      let child = window.renderChildren.apply(this, arguments);
      let extSty={};
      //如果没有存在过tabs 则需要调整宽度，如果调整过了 则不需要重复调整。
      if($(".center-scrollbar").attr("hasTabs")==="true"){
      }else{
        $(".center-scrollbar").attr("hasTabs",true);
        let wid=$(".center-scrollbar").css("width");
        extSty='width:'+(parseFloat(wid)+parseFloat(2))+"px;";
        console.log(extSty,"-------extSty---")
        $(".center-scrollbar").css("width",parseFloat(wid)+20+"px");
      }
      return (
       <div class={className} style={extSty}>
          <Tabs tabsId={renderKey} value={activeTabId}>
           {child}
          </Tabs>
        <div class='ctl-operation-bar'>{components.tabsBtns.apply(this, arguments)}</div>
        </div>
      )
    }
    
    export default tabsItem;

拖拽的tabPanel的jsx代码：

import components from "./hoverComBtns";
    
    function tabPaneItem(h, currentItem, index, list) {
      const { activeItem } = this.$listeners;
      const config=currentItem.__config__;
      const {tabId,label,renderKey} = config;
      const className = 'rowColItem drawing-row-item'
      let child = window.renderChildren.apply(this, arguments);
      return (
        <TabPane  class='go-tab-pane' label={label} name={tabId}>
          <draggable list={config.children || []} animation={340} group="componentsGroup" class="drag-wrapper">
           <Row renderKey={renderKey}>
              <div v-show={config.children.length===0} class="tab-empty-info">
              从左侧拖入或点选组件进行表单设计
              </div>
              {child}
            </Row>
          </draggable>
          <div class='ctl-operation-bar tab-btn-bar' style='position:relative;bottom:2px;left:92%;'>{components.delBtn.apply(this, arguments)}</div>
        </TabPane>
    
      )
    }
    
    export default tabPaneItem;

这样就实现了拖拽生成相应的tab页签容器了

可以点击添加tab页，可以添加、回退等操作，由于这个系列的功能太过于复杂，确实不是特别好描述。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]

内容太多就不一一阐述了，演示地址  
[演示地址][Link 1]  
账号：ystc 密码 123456

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20221120/b5c13777f12143a3b10b6faa4f2a8f63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: /images/20221120/29cfbe6c46f643d784215228c03aef96.png
[Link 1]: https://mm-dev.bjlytr.com/#/comLogin