hcframe-doc/theme-vdoing/components/PageNav.vue

<template>
  <div class="page-nav-wapper">
    <!-- 页面中间左右翻页 -->
    <div
      class="page-nav-centre-wrap"
      v-if="$themeConfig.pageButton !== false && (prev || next)"
    >
      <router-link
        class="page-nav-centre page-nav-centre-prev"
        v-if="prev"
        :to="prev.path"
        @mouseenter.native="showTooltip($event)"
        @mousemove.native="showTooltip($event)"
      >
        <div class="tooltip">{{ prev.title || prev.path }}</div>
      </router-link>

      <router-link
        class="page-nav-centre page-nav-centre-next"
        v-if="next"
        :to="next.path"
        @mouseenter.native="showTooltip($event)"
        @mousemove.native="showTooltip($event)"
      >
        <div class="tooltip">{{ next.title || next.path }}</div>
      </router-link>
    </div>

    <!-- 底部翻页按钮 -->
    <div
      class="page-nav"
      v-if="prev || next"
    >
      <p class="inner">
        <span
          v-if="prev"
          class="prev"
        >
          ←
          <router-link
            v-if="prev"
            class="prev"
            :to="prev.path"
          >{{ prev.title || prev.path }}</router-link>
        </span>

        <span
          v-if="next"
          class="next"
        >
          <router-link
            v-if="next"
            :to="next.path"
          >{{ next.title || next.path }}</router-link>→
        </span>
      </p>
    </div>
  </div>
</template>
<script>
import { resolvePage } from '../util'
import isString from 'lodash/isString'
import isNil from 'lodash/isNil'

export default {
  name: 'PageNav',
  props: ['sidebarItems'],
  computed: {
    prev () {
      return resolvePageLink(LINK_TYPES.PREV, this)
    },

    next () {
      return resolvePageLink(LINK_TYPES.NEXT, this)
    }
  },
  methods: {
    showTooltip (e) {

      const clientW = document.body.clientWidth
      const X = e.clientX
      const tooltipEle = e.target.querySelector('.tooltip')
      if (!tooltipEle) {
        return
      }

      const tooltipEleStyle = tooltipEle.style
      if (X < clientW / 2) {
        tooltipEleStyle.right = null
        tooltipEleStyle.left = X + 10 + 'px'
      } else {
        tooltipEleStyle.left = null
        tooltipEleStyle.right = clientW - X + 10 + 'px'
      }
      tooltipEleStyle.top = e.clientY + 10 + 'px'
    }
  }
}

function resolvePrev (page, items) {
  return find(page, items, -1)
}

function resolveNext (page, items) {
  return find(page, items, 1)
}

const LINK_TYPES = {
  NEXT: {
    resolveLink: resolveNext,
    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
  },
  PREV: {
    resolveLink: resolvePrev,
    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
  }
}

function resolvePageLink (
  linkType,
  { $themeConfig, $page, $route, $site, sidebarItems }
) {
  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType

  // Get link config from theme
  const themeLinkConfig = getThemeLinkConfig($themeConfig)

  // Get link config from current page
  const pageLinkConfig = getPageLinkConfig($page)

  // Page link config will overwrite global theme link config if defined
  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig

  if (link === false) {
    return
  } else if (isString(link)) {
    return resolvePage($site.pages, link, $route.path)
  } else {
    return resolveLink($page, sidebarItems)
  }
}

function find (page, items, offset) {
  const res = []
  flatten(items, res)
  for (let i = 0; i < res.length; i++) {
    const cur = res[i]
    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
      return res[i + offset]
    }
  }
}

function flatten (items, res) {
  for (let i = 0, l = items.length; i < l; i++) {
    if (items[i].type === 'group') {
      flatten(items[i].children || [], res)
    } else {
      res.push(items[i])
    }
  }
}
</script>
<style lang="stylus">
@require '../styles/wrapper.styl'

.page-nav
  @extend $wrapper
  padding-top 1rem
  padding-bottom 0
  .inner
    min-height 2rem
    margin-top 0
    border-top 1px solid var(--borderColor)
    padding-top 1rem
    overflow auto // clear float
  .next
    float right
.page-nav-centre-wrap
  .page-nav-centre
    position fixed
    top 50%
    width 80px
    height 70px
    margin-top -35px
    outline 0
    transition all 0.2s
    border-radius 3px
    opacity 0.55
    z-index 99
    @media (max-width 1340px)
      width 50px
    @media (max-width 960px)
      display none
    &:hover
      background rgba(153, 153, 153, 0.15)
      opacity 1
      .tooltip
        display block
    &:before
      content ''
      display block
      width 10px
      height 10px
      border-top 2px solid #999
      border-right 2px solid #999
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      margin auto
    .tooltip
      display none
      background rgba(0, 0, 0, 0.5)
      color #fff
      padding 4px 8px
      font-size 13px
      border-radius 3px
      position fixed
      max-width 200px
      z-index 99
  .page-nav-centre-prev
    left 0
    &:before
      transform rotate(-135deg)
  .page-nav-centre-next
    right 0
    &:before
      transform rotate(45deg)
.sidebar-open .page-nav-centre-wrap .page-nav-centre-prev
  left $sidebarWidth
.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev
  left 0
</style>