bigtop-manager-ui/src/directives/index.ts

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *    https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import type { App } from 'vue'

interface ObserverElement extends Element {
  cancelObserver?: MutationObserver
}

const install = (app: App) => {
  app.directive('autoScroll', {
    mounted(el: ObserverElement) {
      const observerConfig = {
        childList: true,
        subtree: true,
        characterDataOldValue: true,
        characterData: true
      }

      const observer = new MutationObserver(() => {
        const lastChild = el.lastElementChild
        if (lastChild) {
          lastChild.scrollIntoView({ behavior: 'smooth', block: 'end' })
        }
      })
      observer.observe(el, observerConfig)

      el.cancelObserver = observer
    },

    beforeUnmount(el: ObserverElement) {
      if (el.cancelObserver) {
        el.cancelObserver.disconnect()
        delete el.cancelObserver
      }
    }
  })
}

export default {
  install
}