Anchor 锚点

示例

容器与吸附

使用 container 属性设置 Anchor 的容器，使用 sticky 属性来控制是否在滚动出容器时进行吸附。

虚线框标记容器。

<template>
<article class="anchor-demo">
  <div class="line"/>
  <div
    ref="container"
    class="anchor-wrapper"
  >
    <div
      v-for="i in coffees"
      :id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
      :key="i.value"
      class="block"
    >
      {{ i.label }}
    </div>

    <section class="anchor-one">
      <h3>普通锚点</h3>
      <veui-anchor
        :items="coffees"
        :sticky="false"
        container="container"
      />
    </section>
    <section class="anchor-two">
      <h3>吸附锚点</h3>
      <veui-anchor
        :items="coffees"
        container="container"
      />
    </section>
  </div>
</article>
</template>

<script>
import { Anchor } from 'veui'

export default {
  components: {
    'veui-anchor': Anchor
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: '#infused',
          children: [
            {
              label: 'Breadcrumb',
              value: '/components/breadcrumb'
            }
          ]
        },
        {
          label: 'Boiled',
          value: '#boiled',
          children: [
            {
              label: 'Button',
              value: '/components/button'
            }
          ]
        },
        {
          label: 'Espresso',
          value: '#espresso'
        },
        {
          label: 'Milk coffee',
          value: '#milk-coffee'
        }
      ]
    }
  }
}
</script>

指定偏移

target-offset 用来控制锚点滚动到容器何处开始处于激活状态。

sticky-offset 用来控制 Anchor 处于容器何处时开始吸附。

虚线框标记容器。

<template>
<article class="anchor-offset-demo">
  <div class="target-offset-line"/>
  <div class="sticky-offset-line"/>
  <div
    ref="container"
    class="anchor-wrapper"
  >
    <div
      v-for="i in coffees"
      :id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
      :key="i.value"
      class="block"
    >
      {{ i.label }}
    </div>
    <section class="anchor-two">
      <h3>吸附锚点</h3>
      <veui-anchor
        :items="coffees"
        target-offset="20px"
        sticky-offset="30px"
        container="container"
      />
    </section>
  </div>
</article>
</template>

<script>
import { Anchor } from 'veui'

export default {
  components: {
    'veui-anchor': Anchor
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: '#infused2',
          children: [
            {
              label: 'Breadcrumb',
              value: '/components/breadcrumb'
            }
          ]
        },
        {
          label: 'Boiled',
          value: '#boiled2',
          children: [
            {
              label: 'Button',
              value: '/components/button'
            }
          ]
        },
        {
          label: 'Espresso',
          value: '#espresso2'
        },
        {
          label: 'Milk coffee',
          value: '#milk-coffee2'
        }
      ]
    }
  }
}
</script>

API

属性

名称类型默认值描述
itemsArray<{value, label, children}>[]

数据源数组，每个项目类型为 {label, value, children, ...}。

名称类型描述
labelstring节点的文字描述。
valuestring节点对应的值，一般是页内 hash， 如 #button 。
childrenArray<Object>=节点的子节点数组，数组项类型同 items 数组项。
stickyboolean=false是否有吸附效果。
containerstring|HTMLElement|Window=-Anchor 吸附与判断锚点激活所参考的容器。
target-offsetstring|number=0当某个锚点处于到容器的 target-offset 位置，那么对应的锚点链接处于激活状态。
sticky-offsetstring|number=0对于 sticky Anchor 而言，当容器滚动到 sticky-offset 位置，那么该 Anchor 开始吸附。

插槽

名称描述
item

渲染每个锚点链接。

默认内容：锚点链接。

作用域参数参见 items 属性详情。

item-label

渲染每个锚点链接的文本。

默认内容：锚点链接的描述文本 label。

作用域参数参见 item 插槽。