other / mew-iview

Commit c270c09a81f7f98bd23d4be1b0fd0826e1a1e44c

Authored by Aresn
Committed by GitHub
2 parents 7cd358c0 e0f71ebf

Merge pull request #4007 from lison16/anchor 

增加scroll-offset属性，定义滚动结束后距离容器顶部的距离
Showing 2 changed files with 6 additions and 2 deletions   Show diff stats
Inline Side-by-side
examples/routers/anchor.vue
  Show/Hide comments   View file @c270c09
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <div class="link-wrapper"> 3 <div class="link-wrapper">
4 <Button @click="changeCon">修改为Window</Button> 4 <Button @click="changeCon">修改为Window</Button>
5 <Button @click="andLink">添加一个连接</Button> 5 <Button @click="andLink">添加一个连接</Button>
6 - <Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed> 6 + <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>
7 <AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`"> 7 <AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
8 <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/> 8 <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
9 </AnchorLink> 9 </AnchorLink>
src/components/anchor/anchor.vue
  Show/Hide comments   View file @c270c09
@@ -53,6 +53,10 @@ export default { @@ -53,6 +53,10 @@ export default {
53 showInkInFixed: { 53 showInkInFixed: {
54 type: Boolean, 54 type: Boolean,
55 default: false 55 default: false
  56 + },
  57 + scrollOffset: {
  58 + type: Number,
  59 + default: 0
56 } 60 }
57 }, 61 },
58 computed: { 62 computed: {
@@ -92,7 +96,7 @@ export default { @@ -92,7 +96,7 @@ export default {
92 handleScrollTo () { 96 handleScrollTo () {
93 const anchor = document.getElementById(this.currentId); 97 const anchor = document.getElementById(this.currentId);
94 if (!anchor) return; 98 if (!anchor) return;
95 - const offsetTop = anchor.offsetTop - this.wrapperTop; 99 + const offsetTop = anchor.offsetTop - this.wrapperTop - this.scrollOffset;
96 this.animating = true; 100 this.animating = true;
97 scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => { 101 scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
98 this.animating = false; 102 this.animating = false;