解决el-tooltip滚动时悬浮框相对位置发生变化

本文主要是介绍解决el-tooltip滚动时悬浮框相对位置发生变化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

获取最外层box的class，并在内层添加el-scrollbar

<template><div class="ChartsBottom"><el-scrollbar><ul class=""><li v-for="(item, index) in list" :key="index"><div class="content"><el-tooltip :content="item.name" placement="top" effect="light" :offset="4"><span class="text-exceeding">{{ item.name }}</span></el-tooltip><span><i><b class="numtxt text-exceeding">{{ item.value }}{{ item.unit }}</b></i></span></div></li></ul></el-scrollbar></div>
</template>
<script>
import useScrollCloseToolTip from '@/utils/useScrollCloseToolTip'
export default {name: 'ChartsBottom',props: {list: {type: Array,default: () => []}},setup(props) {useScrollCloseToolTip('ChartsBottom')}
}
</script>
<style lang="scss" scoped>
.ChartsBottom {height: 100%;width: 100%;overflow-y: auto;font-size: 1.4rem;position: relative;padding-top: 0;z-index: 1;ul {margin-top: 1rem;text-align: left;}li {display: inline-block;color: #00a9ff;margin-bottom: 2rem;width: 20%;span {max-width: 85%;display: inline-block;&:nth-child(2) {display: block;color: #fff;margin-top: 1rem;}}i {font-style: normal;}}
}
.numtxt {display: block;
}
</style>

useScrollCloseToolTip.js

import { onMounted } from 'vue'export default function useScrollCloseToolTip(listenDomClass) {onMounted(() => {let dom = document.getElementsByClassName(listenDomClass)for (let j = 0; j < dom.length; j++) {let scrollDom = dom[j].getElementsByClassName('el-scrollbar__wrap')for (let i = 0; i < scrollDom.length; i++) {scrollDom[i].onscroll = () => {let list = document.getElementsByClassName('el-popper')if (list.length > 0) {list[list.length - 1].style.display = 'none'}}}}})
}