anchor-link组件添加scroll-offset属性,会优先使用anchor-link的这个值

This commit is contained in:
zhigang.li 2018-07-02 17:02:21 +08:00
parent e0f71ebf52
commit 145be7a6ad
3 changed files with 17 additions and 5 deletions

View file

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

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;