为了将 outerBox
加入到 self.setBody
中,而不影响已有的 vlParent
,你可以将 outerBox
作为一个新的元素添加到 self
的 body 内部。首先,需要确保你的 self
允许同时包含多个子元素。如果是这样,可以像下面这样修改代码:
- 创建一个容器:在
self.setBody()
中创建一个新容器,用于包含vlParent
和outerBox
。 - 添加这两个容器:将
vlParent
和刚创建的容器分别添加到这个新容器中。
以下是修改后的代码示例:
else if ('0BJECTS' == init.type) {
if (!document.getElementById('outerBox')) {
const outerBox = document.createElement('div');
outerBox.id = 'outerBox';
Object.assign(outerBox.style, {
border: '2px solid #000',
padding: '19px',
borderRadius: '5px',
width: '300px'
});
const tabsContainer = document.createElement('div');
Object.assign(tabsContainer.style, {
display: 'flex',
marginBottom: '19px'
});
const tabs = [
{ name: '逾期', content: '逾期内容' },
{ name: '未逾期', content: '未逾期内容' }
];
const contentContainer = document.createElement('div');
Object.assign(contentContainer.style, {
border: '1px solid #000',
padding: '19px'
});
const switchTab = (tab, content) => {
tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
tab.classList.add('active-tab');
contentContainer.textContent = content;
};
tabs.forEach(({ name, content }) => {
const tab = document.createElement('div');
tab.textContent = name;
tab.classList.add('tab');
tab.addEventListener('click', () => switchTab(tab, content));
tabsContainer.appendChild(tab);
});
switchTab(tabsContainer.querySelector('.tab'), tabs[0].content);
outerBox.appendChild(tabsContainer);
outerBox.appendChild(contentContainer);
document.body.appendChild(outerBox);
const style = document.createElement('style');
style.innerHTML = `
.tab {
padding: 10px;
cursor: pointer;
border: 1px solid #000;
margin-right: 5px;
color: #000;
background-color: #fff;
}
.active-tab {
background-color: #000;
color: #fff;
}
`;
document.head.appendChild(style);
}
let self = new Fieldset(init.useLang ? lang(init.title) : init.title);
let me = this;
// 创建一个新的外部容器
let combinedLayout = new VLayout().setVerticalAlign('top');
// 添加 vlParent 到 combinedLayout
var vlParent = new VLayout().setVerticalAlign('top');
self.setBody(combinedLayout); // 将 combinedLayout 设置为 self 的主体
if (window.isOuterOperator != null && window.isOuterOperator != undefined && window.isOuterOperator == true) {
if (init.code === 'loan') {
if (canl("data clearance:customerinfo:overdue info")) {
config.layout.addMember(self);
} else {
config.layout.addMember(self);
}
}
}
for (var i = 0, N = init.child.length; i < N; i++) {
var initObject = init.child[i];
var vl = this.initlayout(initObject.child, initObject.path, editable);
vl.setCSSProperty("paddingBottom", "5px");
if (N > 0 && i >= 1) {
vl.setCSSProperty("borderTop", "2px solid #E3E3E3");
vl.setCSSProperty("paddingTop", "10px");
}
if (initObject.type === 'OBJECTS_OUT_COLLECTION') {
me.customerOutCollection.layout.addMember(vl);
me.customerOutCollection.count++;
} else {
vlParent.addMember(vl);
}
}
// 将 vlParent 和 outerBox 添加到 combinedLayout
combinedLayout.addMember(vlParent);
combinedLayout.addMember(document.getElementById('outerBox')); // 确保此 ID 存在以便添加
}
修改说明:
- 创建了一个新的布局(
combinedLayout
),并将其设置为self.setBody()
的主体。 - 分别将原来的
vlParent
和新的外部盒子(通过 ID 获取)加入到了这个新的布局中。
这样,您就能够实现将两个部分同时放入布局而不会相互干扰。
内容由零声教学AI助手提供,问题来源于学员提问