滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

<script>
import {
  addResizeListener,
  removeResizeListener
} from 'element-ui/src/utils/resize-event'

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    }
  },

  data() {
    return {
      scrollable: false,
      navOffset: 30
    }
  },

  computed: {
    navStyle() {
      return {
        transform: `translateX(-${this.navOffset}px)`
      }
    }
  },

  updated() {
    this.update()
  },

  mounted() {
    addResizeListener(this.$el, this.update)
  },

  beforeDestroy() {
    if (this.$el && this.update) removeResizeListener(this.$el, this.update)
  },

  methods: {
    scrollPrev() {
      const containerSize = this.$refs.navScroll.offsetWidth
      const currentOffset = this.navOffset

      if (!currentOffset) return

      const newOffset =
        currentOffset > containerSize ? currentOffset - containerSize : 0

      this.navOffset = newOffset
    },
    scrollNext() {
      const navSize = this.$refs.nav.offsetWidth
      const containerSize = this.$refs.navScroll.offsetWidth
      const currentOffset = this.navOffset

      if (navSize - currentOffset <= containerSize) return

      const newOffset =
        navSize - currentOffset > containerSize * 2
          ? currentOffset + containerSize
          : navSize - containerSize

      this.navOffset = newOffset
    },
    scrollToActiveTab() {
      if (!this.scrollable) return

      const nav = this.$refs.nav
      const activeTab = this.$el.querySelector('.is-active')
      if (!activeTab) return
      const navScroll = this.$refs.navScroll
      const activeTabBounding = activeTab.getBoundingClientRect()
      const navScrollBounding = navScroll.getBoundingClientRect()
      const maxOffset = nav.offsetWidth - navScrollBounding.width
      const currentOffset = this.navOffset
      let newOffset = currentOffset

      if (activeTabBounding.left < navScrollBounding.left) {
        newOffset =
          currentOffset - (navScrollBounding.left - activeTabBounding.left)
      }
      if (activeTabBounding.right > navScrollBounding.right) {
        newOffset =
          currentOffset + activeTabBounding.right - navScrollBounding.right
      }
      newOffset = Math.max(newOffset, 0)
      this.navOffset = Math.min(newOffset, maxOffset)
    },
    update() {
      if (!this.$refs.nav) return
      const navSize = this.$refs.nav.offsetWidth
      this.height = this.$refs.nav.offsetHeight
      const containerSize = this.$refs.navScroll.offsetWidth
      const currentOffset = this.navOffset
      if (containerSize < navSize) {
        const currentOffset = this.navOffset
        this.scrollable = this.scrollable || {}
        this.scrollable.prev = currentOffset
        this.scrollable.next = currentOffset + containerSize < navSize
        if (navSize - currentOffset < containerSize) {
          this.navOffset = navSize - containerSize
        }
      } else {
        this.scrollable = false
        if (currentOffset > 0) {
          this.navOffset = 0
        }
      }
    }
  },

  render() {
    const { navStyle, scrollable, scrollNext, scrollPrev, height, width } = this
    const lineHeight = {
      'line-height': height + 'px'
    }
    const scrollBtn = scrollable
      ? [
        <span
          class={['scrollView__nav-prev', scrollable.prev ? '' : 'is-disabled']}
          on-click={scrollPrev}
        >
          <i
            style={lineHeight}
            class='el-icon-arrow-left'></i>
        </span>,
        <span
          class={['scrollView__nav-next', scrollable.next ? '' : 'is-disabled']}
          on-click={scrollNext}
        >
          <i style={lineHeight}
            class='el-icon-arrow-right'></i>
        </span>
      ]
      : null

    return (
      <div
        class={[
          'scrollView__nav-wrap',
          scrollable ? 'is-scrollable' : ''
        ]}
        style={{ width }}
      >
        {scrollBtn}
        <div
          class='scrollView__nav-scroll'
          ref='navScroll'
        >
          <div
            class='scrollView__nav'
            ref='nav'
            style={navStyle}
          >
            {this.$slots.default}
          </div>
        </div>
      </div>
    )
  }
}
</script>

<style lang="less">
.scrollView__nav-wrap {
  display: inline-block;
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  vertical-align: middle;
}

.scrollView__nav-wrap.is-scrollable {
  padding: 0 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.scrollView__nav-wrap::after {
  display: none;
}

.scrollView__nav-scroll {
  overflow: hidden;
}

.scrollView__nav {
  white-space: nowrap;
  position: relative;
  transition: transform 0.3s, -webkit-transform 0.3s;
  float: left;
  z-index: 2;
  margin-left: -62px;
}

.scrollView__nav-prev {
  left: 0;
}
.scrollView__nav-next {
  right: 0;
}
.scrollView__nav-next,
.scrollView__nav-prev {
  position: absolute;
  cursor: pointer;
  line-height: 32px;
  font-size: 12px;
  color: #909399;
}
</style>

全部复制