用魔法打败魔法 - ElBacktop Fix

<template>
  <div :class="classObj" class="app-wrapper">
    <div class="app-container">
      <topbar class="header-container" />
      <el-container class="main-container">
        <sidebar class="aside-container" />
        <el-container class="is-vertical minor-container">
          <breadcrumb class="breadcrumb-container" />
          <!-- 这一行 -->
          <page-container class="page-container" />
        </el-container>
      </el-container>
    </div>

    <el-backtop class="app-b2t" target=".page-container" :visibility-height="50" />
    <!-- <back-to-top class="app-b2t" target=".page-container" :visibility-height="50" /> -->
  </div>
</template>

<template>
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="cachedViews">
      <router-view />
    </keep-alive>
  </transition>
</template>

<script>
/**
 * BackToTop 继承 el-backtop
 * 1. 修复 el-backtop 在 target 被移除后，无法重新初始化的问题
 * 2. 增加 target 的 data-target 属性，用于指定 target 的子元素作为滚动容器。例如：<div data-target=".list-pane"></div>
 */
import { Backtop } from 'element-ui'
import throttle from 'throttle-debounce/throttle'

export default {
  name: 'BackToTop',
  extends: Backtop,
  data() {
    return {
      el: null,
      container: null,
      visible: false,
      observer: null,
    }
  },
  mounted() {
    this.init()
    this.observeTarget()
  },
  beforeDestroy() {
    // 清除事件监听
    this.container.removeEventListener('scroll', this.throttledScrollHandler)
    // 停止观察
    this.observer.disconnect()
  },
  methods: {
    init() {
      this.container = document
      this.el = document.documentElement
      if (this.target) {
        this.el = document.querySelector(this.target)
        if (!this.el) {
          throw new Error(`target is not existed: ${this.target}`)
        }
        // 如果 this.el 有 data-target 属性，就使用 data-target 属性的值作为 target
        if (this.el.dataset.target) {
          const subEl = this.el.querySelector(this.el.dataset.target)
          subEl && (this.el = subEl)
        }
        this.container = this.el
      }
      this.throttledScrollHandler = throttle(300, this.onScroll)
      this.container.addEventListener('scroll', this.throttledScrollHandler)
    },
    /**
     * 观察 this.container 是否被移除或者新增
     * 注意 router-view 切换页面步骤：1. 新增 router-view -> 2. 删除旧 router-view
     */
    observeTarget() {
      // 创建 MutationObserver 实例并传入回调函数
      this.observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'childList') {
            // 检测到删除节点
            if (mutation.removedNodes.length > 0) {
              for (const node of mutation.removedNodes) {
                if (node === this.container) {
                  // 观察如果 this.container 从页面中被移除了，就清除事件监听
                  this.container.removeEventListener('scroll', this.throttledScrollHandler)
                  this.visible = false
                  break
                }
              }
              // 检测删除前是否有新增节点
              if (document.querySelector(this.target) === mutation.nextSibling) {
                // 观察如果 this.container 被删除前的下一个兄弟节点是 this.target，就重新初始化
                this.init()
              }
            }
          }
        }
      })
      // 观察 this.container 父元素的子元素变化
      this.observer.observe(document.querySelector(this.target).parentNode, {
        childList: true,
      })
    },
  },
}
</script>