Merge pull request #4008 from lison16/anchor

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

Merge pull request #4008 from lison16/anchor
anchor-link组件添加scroll-offset属性，会优先使用anchor-link的这个值
Aresn · GitHub
2 parents c270c09a 145be7a6
Showing 3 changed files with 17 additions and 5 deletions Show diff stats
examples/routers/anchor.vue
src/components/anchor/anchor-link.vue
src/components/anchor/anchor.vue
@@ -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>
 <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;