naive-ui/packages/mixins/zindexable.js

import zIndexManager from '../utils/dom/zIndexManager'

/**
 * watch active on component,
 * acquire new z-index on content when active is set to true
 *
 * dependency:
 * $refs.contentContainer
 * $vm.active
 * $vm.detached
 */
export default {
  mounted () {
    if (!this.detached) return
    zIndexManager.registerElement(this._getZindexableContent())
  },
  watch: {
    active (value) {
      if (!this.detached) return
      console.debug('[zindexable.watch.active]:', value)
      if (value) {
        zIndexManager.setNewZIndex(this._getZindexableContent())
      }
    }
  },
  beforeDestroy () {
    if (!this.detached) return
    zIndexManager.unregisterElement(this._getZindexableContent())
  },
  methods: {
    _getZindexableContent () {
      if (this.$refs.contentContainer) {
        return this.$refs.contentContainer
      } else {
        return this.getZindexableContent()
      }
    }
  }
}