Open
Description
Version
1.6.0
Vue Version
1.6.0
Link to minimal reproduction
- 我们的项目是公司内部项目，无法提供相关link
- 但是可以参考官网里该组件的示例，切换双栏模式，构造一条右边12行的评论数据，这样就可以复现报错
Step to reproduce
- 参考官网里该组件的示例
- 参考官网示例构造评论数据，注意需要构造一条右边12行的评论数据，这样就可以复现报错
- 总结来说就是需要构造评论节点和展开按钮节点相邻的数据即可复现，那么向上展开的按钮和上下展开的按钮应该都会复现此问题
-
问题场景如下图：
-
报错如下：
-
原因：
展开按钮需要查询展开节点的上下相邻节点，但这种场景下展开节点的prevLineNode是评论节点，所以获取不到prevLineNumber（parseInt(prevLineNode.children[0].innerText)） -
解决方案：
- 考虑到可能在同一行有多个评论，那这种时候就需要递归查找上一个相邻的diff节点
- 参考代码（以下是我的解决方案，由于代码规范，以及考虑不够完整等问题，所以此处提issue而不是pr，不够完美但可供参考，希望可以解决该问题）
// vue-devui/packages/devui-vue/devui/code-review/src/utils.ts
// 优化该方法，防止节点找不到的情况下报错
// 中间行展开后，折叠行数小于阈值时，将向上向下展开按钮更新为全部展开
export function updateExpandUpDownButton(trNode: HTMLElement) {
trNode.children[0]?.children[0]?.remove();
trNode.children[0]?.children[0]?.classList.remove('up-expand');
trNode.children[0]?.children[0]?.classList.add('all-expand');
trNode.children[0]?.children[0] && (trNode.children[0].children[0].innerHTML = AllExpandIcon());
}
// 新增以下两个方法，递归查找上一个或者下一个可以获取到左边行号的节点
/**
* 查找给定节点的前一个同级元素节点。
* 适用于下一行是新增行或者删除行的情况
*
* @param _node 如果折叠行后一行左边获取不到行数，则寻找第一个左边有行数的行。
* @returns 返回找到的后一个同级元素节点，如果没有找到则返回null。
*/
export function findNextElement(_node: Element): Element {
if (_node.children[0]?.innerText) {
return _node;
}
return findNextElement(_node.nextElementSibling);
}
/**
* 查找给定节点的前一个同级元素节点。
* 适用于上一行是新增行或者删除行或者评论行的情况
*
* @param _node 如果折叠行后一行左边获取不到行数，则寻找第一个左边有行数的行。
* @returns 返回找到的前一个同级元素节点，如果没有找到则返回null。
*/
export function findPrevElement(_node: Element): Element {
if (_node.children[0]?.innerText) {
return _node;
}
return findPrevElement(_node.previousElementSibling);
}
// 修改下面方法中各个判断条件里获取nextLineNode 和 prevLineNode的方法
export function updateLineNumberInDatasetForDoubleColumn(...省略掉) {
const nextLineNode = findNextElement(trNode.nextElementSibling) as HTMLElement;
const prevLineNode = findPrevElement(trNode.previousElementSibling) as HTMLElement;
// 这里调用 updateExpandUpDownButton 这个方法有点多此一举，可以直接隐藏该节点即可
if (isExpandAll && updateExpandButton) {
trNode.style.display = 'none';
// updateExpandUpDownButton(trNode);
}
}What is expected
No response
What is actually happening
No response
Any additional comments (optional)
No response