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

前面实现了table表格的拖拽生成，这里记录下tab标签页的拖拽生成。
直接上图：

拖拽数据的准备

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页，可以添加、回退等操作，由于这个系列的功能太过于复杂，确实不是特别好描述。

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