commit
8fe474b951
5 changed files with 21 additions and 15 deletions
|
@ -7,6 +7,7 @@
|
|||
<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>
|
||||
<AnchorLink href="#lishi" title="李氏专跳"/>
|
||||
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
|
||||
</Anchor>
|
||||
</div>
|
||||
|
@ -32,6 +33,8 @@
|
|||
</Panel>
|
||||
</Collapse>
|
||||
</template>
|
||||
<h1 id="lishi">李氏专跳</h1>
|
||||
<p v-for="i in 100" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
|
||||
<!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
|
||||
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
|
||||
</div>
|
||||
|
@ -58,6 +61,8 @@
|
|||
</template>
|
||||
<h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
|
||||
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
|
||||
<h1 id="lishi">李氏专跳</h1>
|
||||
<p v-for="i in 50" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -32,7 +32,14 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
goAnchor () {
|
||||
this.anchorCom.turnTo(this.href);
|
||||
this.currentLink = this.href;
|
||||
this.anchorCom.$emit('on-select', this.href);
|
||||
const isRoute = this.$router;
|
||||
if (isRoute) {
|
||||
this.$router.push(this.href);
|
||||
} else {
|
||||
window.location.href = this.href;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</component>
|
||||
</template>
|
||||
<script>
|
||||
import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
|
||||
import { scrollTop, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
|
||||
import { on, off } from '../../utils/dom';
|
||||
export default {
|
||||
name: 'Anchor',
|
||||
|
@ -25,7 +25,6 @@ export default {
|
|||
prefix: 'ivu-anchor',
|
||||
isAffixed: false, // current affixed state
|
||||
inkTop: 0,
|
||||
linkHeight: 0,
|
||||
animating: false, // if is scrolling now
|
||||
currentLink: '', // current show link => #href -> currentLink = #href
|
||||
currentId: '', // current show title id => #href -> currentId = href
|
||||
|
@ -83,16 +82,10 @@ export default {
|
|||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
|
||||
this.getCurrentScrollAtTitleId(scrollTop);
|
||||
},
|
||||
turnTo (href) {
|
||||
this.currentLink = href;
|
||||
this.$router.push({
|
||||
path: href
|
||||
});
|
||||
this.$emit('on-select', href);
|
||||
},
|
||||
handleHashChange () {
|
||||
const url = window.location.href;
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(url);
|
||||
if (!sharpLinkMatch) return;
|
||||
this.currentLink = sharpLinkMatch[0];
|
||||
this.currentId = sharpLinkMatch[1];
|
||||
},
|
||||
|
@ -158,8 +151,7 @@ export default {
|
|||
off(window, 'hashchange', this.handleHashChange);
|
||||
},
|
||||
init () {
|
||||
const anchorLink = findComponentDownward(this, 'AnchorLink');
|
||||
this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0;
|
||||
// const anchorLink = findComponentDownward(this, 'AnchorLink');
|
||||
this.handleHashChange();
|
||||
this.$nextTick(() => {
|
||||
this.removeListener();
|
||||
|
@ -177,7 +169,9 @@ export default {
|
|||
watch: {
|
||||
'$route' () {
|
||||
this.handleHashChange();
|
||||
this.handleScrollTo();
|
||||
this.$nextTick(() => {
|
||||
this.handleScrollTo();
|
||||
});
|
||||
},
|
||||
container () {
|
||||
this.init();
|
||||
|
|
|
@ -43,4 +43,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
@ -48,4 +48,4 @@
|
|||
@import "divider";
|
||||
@import "anchor";
|
||||
@import "time";
|
||||
@import "cell";
|
||||
@import "cell";
|
||||
|
|
Loading…
Add table
Reference in a new issue