解决el-tooltip v-for循环很多的时候 引起的页面抖动

解决思路
监听 带滚动条的盒子

滚动往下滑的时候循环隐藏掉弹框

 mounted() {
    // 监听 topUp 元素的滚动事件
    const topUpElement = document.querySelector('.topUp');
    if (topUpElement) {
      topUpElement.addEventListener('wheel', this.handleScroll);
    }
  },

  beforeDestroy() {
    // 移除事件监听器
    const topUpElement = document.querySelector('.topUp');
    if (topUpElement) {
      topUpElement.removeEventListener('wheel', this.handleScroll);
    }
  },




  methods: {
    handleScroll(event) {
      if (event.deltaY < 0) {
        const tooltips = document.querySelectorAll(".el-tooltip__popper");
        tooltips?.forEach(tooltip => {
          tooltip.style.display = 'none';
        });
      }
    },
}

你可能感兴趣的:(vue.js,javascript,前端)