Anchor 锚点

示例

普通锚点

使用 container 属性设置发生滚动的容器，当 Anchor 组件不在容器中（也就不随容器滚动），此时可以不用设置 sticky 属性。

Infused

Boiled

Espresso

Milk coffee

虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。

在 GitHub 上编辑此页编辑

<template>
<article class="anchor-offset-demo">
  <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>
  </div>
  <section class="anchor-two">
    <veui-anchor
      :items="coffees"
      container="container"
    />
  </section>
</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>

<style lang="less" scoped>
.anchor-offset-demo {
  position: relative;

  .anchor-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow: auto;
    border: 1px dashed;

    & > section {
      position: absolute;
    }
  }

  .block {
    white-space: nowrap;
    border-top: 1px solid #000;
    width: 100px;
    height: 150px;
    flex: none;

    & + .block {
      margin-top: 20px;
    }
  }

  .anchor-two {
    position: absolute;
    left: 250px;
    top: 10px;
  }
}
</style>

吸附锚点

当 Anchor 组件在容器中（随容器滚动），此时可设置 sticky 属性来控制组件在滚动出容器时进行吸附。

Infused

Boiled

Espresso

Milk coffee

虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。

在 GitHub 上编辑此页编辑

<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-two">
      <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: '#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>

<style lang="less" scoped>
.anchor-demo {
  position: relative;

  .anchor-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow: auto;
    border: 1px dashed;

    & > section {
      position: absolute;
    }
  }

  .block {
    white-space: nowrap;
    border-top: 1px solid #000;
    width: 100px;
    height: 150px;
    flex: none;

    & + .block {
      margin-top: 20px;
    }
  }

  .anchor-one {
    position: absolute;
    left: 250px;
    top: 50px;
  }

  .anchor-two {
    position: absolute;
    left: 250px;
    top: 50px;
  }
}
</style>

指定偏移

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

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

Infused

Boiled

Espresso

Milk coffee

吸附锚点

虚线框标记容器，黑实线标记锚点项顶部。

当黑实线和 tagetOffset 线重合触发激活。

Anchor 吸附在 stickyOffset 线处。

在 GitHub 上编辑此页编辑

<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: '#infused1',
          children: [
            {
              label: 'Breadcrumb',
              value: '/components/breadcrumb'
            }
          ]
        },
        {
          label: 'Boiled',
          value: '#boiled1',
          children: [
            {
              label: 'Button',
              value: '/components/button'
            }
          ]
        },
        {
          label: 'Espresso',
          value: '#espresso1'
        },
        {
          label: 'Milk coffee',
          value: '#milk-coffee1'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.anchor-offset-demo {
  position: relative;

  .sticky-offset-line,
  .target-offset-line {
    position: absolute;
    top: 20px;
    width: 180px;
    border-top: 1px solid red;

    &::after {
      content: "targetOffset（切换于此）";
      position: absolute;
      right: 0;
      bottom: 0;
      color: red;
      font-size: 12px;
    }
  }

  .sticky-offset-line {
    top: 30px;
    left: 250px;

    &::after {
      content: "stickyOffset（吸附于此）";
    }
  }

  .anchor-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow: auto;
    border: 1px dashed;

    & > section {
      position: absolute;
    }
  }

  .block {
    white-space: nowrap;
    border-top: 1px solid #000;
    width: 100px;
    height: 150px;
    flex: none;

    & + .block {
      margin-top: 20px;
    }
  }

  .anchor-two {
    position: absolute;
    left: 250px;
    top: 50px;
  }
}
</style>

API

属性

名称类型默认值描述

items

Array<{value, label, children}>

[]

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

名称	类型	描述
`label`	`string`	节点的文字描述。
`value`	`string`	节点对应的值，一般是页内 hash，如 `#button` 。
`children`	`Array<Object>=`	节点的子节点数组，数组项类型同 `items` 数组项。

sticky boolean= false 是否有吸附效果。

container string | HTMLElement | Window= - Anchor 吸附与判断锚点激活所参考的容器。

target-offset string | number= 0 当某个锚点处于到容器的 target-offset 位置，那么对应的锚点链接处于激活状态。数值类型值为 px 值，也可以传入如 '10%' 的百分比字符串，将基于 container 对应容器的高度比例进行计算。

sticky-offset string | number= 0 对于 sticky Anchor 而言，当容器滚动到 sticky-offset 位置，那么该 Anchor 开始吸附。不同值类型含义同 target-offset 属性。

插槽

名称描述

名称	描述
`item`	渲染每个锚点链接。默认内容：锚点链接。作用域参数参见 `items` 属性详情。
`item-label`	渲染每个锚点链接的文本。默认内容：锚点链接的描述文本 `label`。作用域参数参见 `item` 插槽。

item

渲染每个锚点链接。

默认内容：锚点链接。

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

item-label

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

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

作用域参数参见 item 插槽。

在 GitHub 上编辑此页编辑