fixed bug of anchor that will error when add new AnchorLink async

This commit is contained in:
zhigang.li 2018-04-12 21:23:48 +08:00
parent a1fb479092
commit 4556cfa8a5
3 changed files with 24 additions and 6 deletions

View file

@ -2,10 +2,12 @@
<div class="anchor-wrapper"> <div class="anchor-wrapper">
<div class="link-wrapper"> <div class="link-wrapper">
<Button @click="changeCon">修改为Window</Button> <Button @click="changeCon">修改为Window</Button>
<Button @click="andLink">添加一个连接</Button>
<Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed> <Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :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 - 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 v-if="link === 61" href="#title-child-69" title="title-child-69"/>
</AnchorLink> </AnchorLink>
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
</Anchor> </Anchor>
</div> </div>
<div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper"> <div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
@ -30,6 +32,8 @@
</Panel> </Panel>
</Collapse> </Collapse>
</template> </template>
<!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
</div> </div>
<div v-else> <div v-else>
<template v-for="i in 300"> <template v-for="i in 300">
@ -52,6 +56,8 @@
</Panel> </Panel>
</Collapse> </Collapse>
</template> </template>
<h1 id="new-link">这是新添加的哦哦哦哦哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
</div> </div>
</div> </div>
@ -63,7 +69,8 @@ export default {
container: null, container: null,
value1: '1', value1: '1',
scrollCon: '', scrollCon: '',
con: 'div' con: 'div',
showNewLink: false
} }
}, },
methods: { methods: {
@ -76,6 +83,9 @@ export default {
}, },
handleSelect (href) { handleSelect (href) {
console.log(`select ${href}`) console.log(`select ${href}`)
},
andLink () {
this.showNewLink = true;
} }
}, },
mounted () { mounted () {

View file

@ -40,6 +40,11 @@ export default {
goAnchor () { goAnchor () {
this.parentAnchor.turnTo(this.href); this.parentAnchor.turnTo(this.href);
} }
},
mounted () {
this.$nextTick(() => {
this.parentAnchor.init();
});
} }
}; };
</script> </script>

View file

@ -112,13 +112,16 @@ export default {
const links = findComponentsDownward(this, 'AnchorLink').map(link => { const links = findComponentsDownward(this, 'AnchorLink').map(link => {
return link.href; return link.href;
}); });
const offsetArr = links.map(link => { const idArr = links.map(link => {
const id = link.split('#')[1]; return link.split('#')[1];
});
let offsetArr = [];
idArr.forEach(id => {
const titleEle = document.getElementById(id); const titleEle = document.getElementById(id);
return { if (titleEle) offsetArr.push({
link: link, link: `#${id}`,
offset: titleEle.offsetTop - this.scrollElement.offsetTop offset: titleEle.offsetTop - this.scrollElement.offsetTop
}; });
}); });
this.titlesOffsetArr = offsetArr; this.titlesOffsetArr = offsetArr;
}, },