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 3 <div class="link-wrapper">
4 4 <Button @click="changeCon">修改为Window</Button>
5 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 7 <AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
8 8 <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
9 9 </AnchorLink>
... ...
src/components/anchor/anchor.vue
  Show/Hide comments   View file @c270c09
... ... @@ -53,6 +53,10 @@ export default {
53 53 showInkInFixed: {
54 54 type: Boolean,
55 55 default: false
  56 + },
  57 + scrollOffset: {
  58 + type: Number,
  59 + default: 0
56 60 }
57 61 },
58 62 computed: {
... ... @@ -92,7 +96,7 @@ export default {
92 96 handleScrollTo () {
93 97 const anchor = document.getElementById(this.currentId);
94 98 if (!anchor) return;
95   - const offsetTop = anchor.offsetTop - this.wrapperTop;
  99 + const offsetTop = anchor.offsetTop - this.wrapperTop - this.scrollOffset;
96 100 this.animating = true;
97 101 scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
98 102 this.animating = false;
... ...