Anchor
Anchor is primarily used for scroll navigation.
Basic Usage
Defaults to window scrolling; you can also set the scrolling area's target and use b-affix to fix it in place.
<template>
<div style="overflow: hidden; border: 1px solid #eee">
<div style="width: 200px">
<b-anchor show-ink style="margin-left: 20px">
<b-anchor-link href="#Basic用法" title="Basic用法"></b-anchor-link>
<b-anchor-link href="#Customicon" title="Customicon"></b-anchor-link>
<b-anchor-link href="#Customcolor" title="Customcolor"></b-anchor-link>
<b-anchor-link href="#指定滚动容器" title="指定滚动容器"></b-anchor-link>
<b-anchor-link href="#props" title="Props"></b-anchor-link>
<b-anchor-link href="#events" title="Events"></b-anchor-link>
<b-anchor-link href="#anchorlink-props" title="AnchorLink Props"></b-anchor-link>
</b-anchor>
</div>
</div>
</template>Customicon
Set icon to customize the dot as a custom icon. Solid icons are recommended for the best visual effect.
<template>
<div style="overflow: hidden; border: 1px solid #eee" flex="box:mean">
<div style="padding: 20px; background-color: #fff; border-right: 1px solid #eee">
<b-anchor icon="star-fill">
<b-anchor-link href="#Basic用法" title="Basic用法"></b-anchor-link>
<b-anchor-link href="#Customicon" title="Customicon"></b-anchor-link>
<b-anchor-link href="#Customcolor" title="Customcolor"></b-anchor-link>
<b-anchor-link href="#指定滚动容器" title="指定滚动容器"></b-anchor-link>
<b-anchor-link href="#props" title="Props"></b-anchor-link>
<b-anchor-link href="#events" title="Events"></b-anchor-link>
<b-anchor-link href="#anchorlink-props" title="AnchorLink Props"></b-anchor-link>
</b-anchor>
</div>
<div style="padding: 20px; background-color: #fff">
<b-anchor icon="tag-fill" :icon-size="20">
<b-anchor-link href="#Basic用法" title="Basic用法"></b-anchor-link>
<b-anchor-link href="#Customicon" title="Customicon"></b-anchor-link>
<b-anchor-link href="#Customcolor" title="Customcolor"></b-anchor-link>
<b-anchor-link href="#指定滚动容器" title="指定滚动容器"></b-anchor-link>
<b-anchor-link href="#props" title="Props"></b-anchor-link>
<b-anchor-link href="#events" title="Events"></b-anchor-link>
<b-anchor-link href="#anchorlink-props" title="AnchorLink Props"></b-anchor-link>
</b-anchor>
</div>
</div>
</template>Customcolor
Set activeColor to customize the icon color
<template>
<div style="overflow: hidden; border: 1px solid #eee" flex="box:mean">
<div style="padding: 20px; background-color: #fff; border-right: 1px solid #eee">
<b-anchor icon="fire-fill" active-color="success">
<b-anchor-link href="#Basic用法" title="Basic用法"></b-anchor-link>
<b-anchor-link href="#Customicon" title="Customicon"></b-anchor-link>
<b-anchor-link href="#Customcolor" title="Customcolor"></b-anchor-link>
<b-anchor-link href="#指定滚动容器" title="指定滚动容器"></b-anchor-link>
<b-anchor-link href="#props" title="Props"></b-anchor-link>
<b-anchor-link href="#events" title="Events"></b-anchor-link>
<b-anchor-link href="#anchorlink-props" title="AnchorLink Props"></b-anchor-link>
</b-anchor>
</div>
<div style="padding: 20px; background-color: #fff">
<b-anchor active-color="#ff53a5" show-ink>
<b-anchor-link href="#Basic用法" title="Basic用法"></b-anchor-link>
<b-anchor-link href="#Customicon" title="Customicon"></b-anchor-link>
<b-anchor-link href="#Customcolor" title="Customcolor"></b-anchor-link>
<b-anchor-link href="#指定滚动容器" title="指定滚动容器"></b-anchor-link>
<b-anchor-link href="#props" title="Props"></b-anchor-link>
<b-anchor-link href="#events" title="Events"></b-anchor-link>
<b-anchor-link href="#anchorlink-props" title="AnchorLink Props"></b-anchor-link>
</b-anchor>
</div>
</div>
</template>Specify Scroll Container
Set target to specify the scroll area identifier; the scroll container must be positioned.
<template>
<div>
<b-button size="small" @click="scrollTo7">滚动到第七Row</b-button>
<div style="overflow: hidden; border: 1px solid #eee" flex>
<div style="padding: 20px; width: 30%; background-color: #fff; border-right: 1px solid #eee">
<b-anchor ref="anchorScrollRef" target="#scrollWrap" show-ink>
<b-anchor-link href="#id1" title="Title1"></b-anchor-link>
<b-anchor-link href="#id2" title="Title2"></b-anchor-link>
<b-anchor-link href="#id3" title="Title3"></b-anchor-link>
<b-anchor-link href="#id4" title="Title4"></b-anchor-link>
<b-anchor-link href="#id5" title="Title5"></b-anchor-link>
<b-anchor-link href="#id6" title="Title6"></b-anchor-link>
<b-anchor-link href="#id7" title="Title7"></b-anchor-link>
<b-anchor-link href="#id10" title="Title10"></b-anchor-link>
</b-anchor>
</div>
<div
id="scrollWrap"
style="
position: relative;
padding: 20px;
width: 70%;
height: 400px;
overflow: auto;
background-color: #fff;
"
>
<div v-for="i in 10" :key="i">
<h4 :id="`id${i}`" style="font-weight: 500; padding: 5px; border-bottom: 1px solid #eee">
Title{{ i }}
</h4>
<p v-for="k in 10" :key="k">{{ `我是第${k}RowContent...` }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const anchorScrollRef = ref(null)
function scrollTo7() {
console.log('滚动到第七Row ')
anchorScrollRef.value?.chooseLink('#id7')
}
</script>Props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| icon | Whether to set a custom icon | string | — | — |
| icon-size | Custom icon size | Number | — | — |
| active-color | Active color | string | primary,info,success,warning,danger,custom | — |
| offset-top | Triggers when the specified offset from the window top is reached | Number | — | 0 |
| bounds | Anchor area boundary | Number | — | 5 |
| showInk | Whether to show the small dot | Boolean | — | false |
| scroll-offset | Extra scroll distance on click | Number | — | 0 |
| target | Specifies the scroll container identifier; the scroll container must be positioned for calculating scroll offset | string | — | — |
Events
| Event Name | Description | Return Value |
|---|---|---|
| select | Triggers when anchor is clicked, returns link | href |
AnchorLink Props
| Parameter | Description | Type | Options | Default |
|---|---|---|---|---|
| href | anchorlink | String | — | — |
| title | Text content | String | — | — |