anchor-link组件添加scroll-offset属性,会优先使用anchor-link的这个值
This commit is contained in:
parent
e0f71ebf52
commit
145be7a6ad
3 changed files with 17 additions and 5 deletions
|
@ -5,9 +5,9 @@
|
|||
<Button @click="andLink">添加一个连接</Button>
|
||||
<Anchor :bounds="100" @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :scroll-offset="100" :container="scrollCon" show-ink-in-fixed>
|
||||
<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
|
||||
<AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
|
||||
<AnchorLink :scroll-offset="20" v-if="link === 61" href="#title-child-69" title="title-child-69"/>
|
||||
</AnchorLink>
|
||||
<AnchorLink href="#lishi" title="李氏专跳"/>
|
||||
<AnchorLink :scroll-offset="200" href="#lishi" title="李氏专跳"/>
|
||||
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
|
||||
</Anchor>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="anchorLinkClasses">
|
||||
<a :class="linkTitleClasses" :href="href" :data-href="href" @click.prevent="goAnchor" :title="title">{{ title }}</a>
|
||||
<a :class="linkTitleClasses" :href="href" :data-scroll-offset="scrollOffset" :data-href="href" @click.prevent="goAnchor" :title="title">{{ title }}</a>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -10,7 +10,13 @@ export default {
|
|||
inject: ['anchorCom'],
|
||||
props: {
|
||||
href: String,
|
||||
title: String
|
||||
title: String,
|
||||
scrollOffset: {
|
||||
type: Number,
|
||||
default () {
|
||||
return this.anchorCom.scrollOffset
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
@ -95,8 +95,14 @@ export default {
|
|||
},
|
||||
handleScrollTo () {
|
||||
const anchor = document.getElementById(this.currentId);
|
||||
const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
|
||||
let offset = this.scrollOffset;
|
||||
if (currentLinkElementA) {
|
||||
offset = parseFloat(currentLinkElementA.getAttribute('data-scroll-offset'));
|
||||
}
|
||||
|
||||
if (!anchor) return;
|
||||
const offsetTop = anchor.offsetTop - this.wrapperTop - this.scrollOffset;
|
||||
const offsetTop = anchor.offsetTop - this.wrapperTop - offset;
|
||||
this.animating = true;
|
||||
scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
|
||||
this.animating = false;
|
||||
|
|
Loading…
Add table
Reference in a new issue