前面实现了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