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) =>{
   // 创建显示div
   const 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);
        }
}

效果如下