vue3 v-html绑定数据，点击sub实现popover效果

<p v-html="handleContent(article)"></p>

const handleContent = (article) =>{...content = content.repalce('xxx', '<sup class="sup" onclick="popover('sup-'+id, info)">'+infoName+'</sup>'); // 给sup一个唯一ID
}// 定时器
const timer;const popover = (parentId, msg) =>{// 创建显示divconst duration = 1000;const m = document.createElement('div');m.innerHTML = msg;clearTimeout(timer);let pop = document.getElementsByClassName('pop');if (pop.length > 0) {for (let i = 0; i < pop.length; i += 1) {pop[i].parentNode.removeChild(toast[i]);}}m.classList.add('pop-sub', 'pop');document.getElementById(fatherId).appendChild(m);// 定时清除setTimeout(() => {const d = 1;m.style.transition = `-webkit-transform ${d}s ease-in, opacity ${d}s ease-in`;m.style.opacity = '0';timer = setTimeout(() => {pop = document.getElementsByClassName('pop');if (pop.length > 0) {for (let i = 0; i < pop.length; i += 1) {pop[i].parentNode.removeChild(pop[i]);}}}, d * 1000);}, duration);
}

sup.sup{position: relative;
}
.pop{position: absolute;left: 50%;bottom: 24px;width: 300px;line-height: 22px;font-size: 12px;color: #fff;background: #333;border-radius: 6px;padding: 6px 6px;transform: translate(-50%, 0);&::after {position: absolute;bottom: -8px;left: 50%;border-top: 8px solid #333;border-right: 8px solid transparent;border-left: 8px solid transparent;content: '';transform: translate(-50%, 0);}
}

效果如下