Merge pull request #4008 from lison16/anchor

anchor-link组件添加scroll-offset属性,会优先使用anchor-link的这个值
This commit is contained in:
Aresn 2018-07-02 17:05:38 +08:00 committed by GitHub
commit 32289c417f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 5 deletions

View file

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

View file

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