通过当前点击元素找到父元素
export const findBlock = target => {
if (!target) {
return null
}
if (target.hasAttribute && target.hasAttribute('data-slate-editor')) {
return null
}
if (
target.getAttribute &&
target.getAttribute('data-slate-node') === 'element' &&
target.parentNode &&
target.parentNode.hasAttribute('data-slate-editor')
) {
const editorDom = document.querySelector('[data-slate-editor]')
const childElements = editorDom.children
const index = Array.prototype.indexOf.call(childElements, target)
return { target, index }
}
return findBlock(target.parentNode)
}
点击事件方法1
const handleEditClick = (event) => {
const targetNode = event.target;
const { target: blockNode, index } = findBlock(targetNode) || {};
if(aiBlockInfo.blockNode){
editDiv.removeEventListener('click',handleClickEdit);
aiBlockInfo.blockNode.classList.remove('ai-active-row');
aiBlockInfo.blockNode.removeChild(editDiv);
aiBlockInfo.blockNode = null;
}
if(!blockNode || (!index && index !=0)){
return;
}
if(!canEditType.includes(orginNote[index].type)){
return;
}
aiBlockInfo.blockNode = blockNode;
aiBlockInfo.index = index;
blockNode.classList.add('ai-active-row');
const divClass = blockNode.offsetTop-42>articleContentRef.value.scrollTop?'ai-edit-btn-tip-top':'ai-edit-btn-bottom';
editDiv.className = `ai-edit-btn-tip ${divClass}`
editDiv.innerHTML = `<span class="ai-edit-arrow" ></span> 编辑`;
editDiv.addEventListener("click", handleClickEdit);
blockNode.appendChild(editDiv);
forceUpdatePage();
proxy.$forceUpdate();
}
点击事件方法2
const hiddenAiTip = () => {
aiSelectInfo.height = 0;
aiSelectInfo.top = '0px';
aiSelectInfo.display="none";
aiSelectInfo.editClass = ` ai-edit-btn-tip`;
}
const handleEditClick = (event) => {
const targetNode = event.target;
const { target: blockNode, index } = findBlock(targetNode) || {};
hiddenAiTip()
if(!blockNode || (!index && index !=0)){
return;
}
if(!canEditType.includes(orginNote[index].type)){
return;
}
aiBlockInfo.blockNode = blockNode;
aiBlockInfo.index = index;
aiSelectInfo.height=( blockNode.clientHeight + 8)+'px';
aiSelectInfo.top = (blockNode.scrollTop + blockNode.offsetTop + 14)+'px';
aiSelectInfo.display="block";
const editClass = blockNode.offsetTop-42>articleContentRef.value.scrollTop?'ai-edit-btn-tip-top':'ai-edit-btn-bottom';
aiSelectInfo.editClass = `ai-edit-btn-tip ${editClass}`;
forceUpdatePage();
}