解决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'
          }
        }
      }
    }
  })
}

你可能感兴趣的:(1024程序员节,前端)