Please wrap the entire output inside a one single code block!

Anchor

Examples

Normal anchor

Use the container prop to set the scrolling container. When the Anchor component is not in the container (i.e., not scrolling with the container), the sticky prop does not need to be set.

Infused

Boiled

Espresso

Milk coffee

Edit this demo on GitHubEdit

<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>

Sticky anchor

When the Anchor component is in the container (scrolling with the container), the sticky prop can be set to prevent the component from scrolling out of the container.

Infused

Boiled

Espresso

Milk coffee

Edit this demo on GitHubEdit

<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>

Specify offsets

Use the target-offset prop to control where the anchor starts to be activated when it scrolls to a position in the container.

Use the sticky-offset prop to control where the Anchor starts to become sticky to the container when it scrolls to a position.

Infused

Boiled

Espresso

Milk coffee

吸附锚点

Edit this demo on GitHubEdit

<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

Props

Name Type Default Description

items

Array<{value, label, children}>

[]

The data source array, where each item is of type {label, value, children, ...}.

Name	Type	Description
`label`	`string`	The text description of the node.
`value`	`string`	The value corresponding to the node, usually the page hash, such as `#button`.
`children`	`Array<Object>`	The array of child nodes of the node, with the same item type as the `items` array.

sticky boolean false Whether the component has sticky effect.

container string | HTMLElement | Window - The container which Anchor sticks to and where activation is calculated against.

target-offset string | number 0 When a certain anchor is at the target-offset position from the container, the corresponding anchor link is activated. The numerical value is in px, or a percentage string like '10%' can be passed in, which will be calculated based on the height ratio of the corresponding container.

sticky-offset string | number 0 For the sticky Anchor, when the container scrolls to the sticky-offset position, the Anchor starts to become sticky. The meaning of different value types is the same as that of the target-offset prop.

Slots

Name Description

Name	Description
`item`	Render each anchor link. Default content: Anchor link. The scope parameter refers to the `items` prop details.
`item-label`	Render the text of each anchor link. Default content: The description text of the anchor link, `label`. The scope parameter refers to the `item` slot.

item

Render each anchor link.

Default content: Anchor link.

The scope parameter refers to the items prop details.

item-label

Render the text of each anchor link.

Default content: The description text of the anchor link, label.

The scope parameter refers to the item slot.

Edit this page on GitHubEdit