fixed bug of anchor that will error when add new AnchorLink async
This commit is contained in:
parent
a1fb479092
commit
4556cfa8a5
3 changed files with 24 additions and 6 deletions
|
@ -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 () {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Reference in a new issue