chenhaodong / mew-iview

Commit 4556cfa8a5196a7cd5b404cdfaa3934342978b51

Authored by zhigang.li
1 parent a1fb4790

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

Showing 3 changed files with 24 additions and 6 deletions   Show diff stats
Inline Side-by-side
examples/routers/anchor.vue
  Show/Hide comments   View file @4556cfa
... ... @@ -2,10 +2,12 @@
2 2 <div class="anchor-wrapper">
3 3 <div class="link-wrapper">
4 4 <Button @click="changeCon">修改为Window</Button>
  5 + <Button @click="andLink">添加一个连接</Button>
5 6 <Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed>
6 7 <AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
7 8 <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
8 9 </AnchorLink>
  10 + <AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
9 11 </Anchor>
10 12 </div>
11 13 <div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
... ... @@ -30,6 +32,8 @@
30 32 </Panel>
31 33 </Collapse>
32 34 </template>
  35 + <!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
  36 + <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
33 37 </div>
34 38 <div v-else>
35 39 <template v-for="i in 300">
... ... @@ -52,6 +56,8 @@
52 56 </Panel>
53 57 </Collapse>
54 58 </template>
  59 + <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
  60 + <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
55 61 </div>
56 62  
57 63 </div>
... ... @@ -63,7 +69,8 @@ export default {
63 69 container: null,
64 70 value1: '1',
65 71 scrollCon: '',
66   - con: 'div'
  72 + con: 'div',
  73 + showNewLink: false
67 74 }
68 75 },
69 76 methods: {
... ... @@ -76,6 +83,9 @@ export default {
76 83 },
77 84 handleSelect (href) {
78 85 console.log(`select ${href}`)
  86 + },
  87 + andLink () {
  88 + this.showNewLink = true;
79 89 }
80 90 },
81 91 mounted () {
... ...
src/components/anchor/anchor-link.vue
  Show/Hide comments   View file @4556cfa
... ... @@ -40,6 +40,11 @@ export default {
40 40 goAnchor () {
41 41 this.parentAnchor.turnTo(this.href);
42 42 }
  43 + },
  44 + mounted () {
  45 + this.$nextTick(() => {
  46 + this.parentAnchor.init();
  47 + });
43 48 }
44 49 };
45 50 </script>
... ...
src/components/anchor/anchor.vue
  Show/Hide comments   View file @4556cfa
... ... @@ -112,13 +112,16 @@ export default {
112 112 const links = findComponentsDownward(this, 'AnchorLink').map(link => {
113 113 return link.href;
114 114 });
115   - const offsetArr = links.map(link => {
116   - const id = link.split('#')[1];
  115 + const idArr = links.map(link => {
  116 + return link.split('#')[1];
  117 + });
  118 + let offsetArr = [];
  119 + idArr.forEach(id => {
117 120 const titleEle = document.getElementById(id);
118   - return {
119   - link: link,
  121 + if (titleEle) offsetArr.push({
  122 + link: `#${id}`,
120 123 offset: titleEle.offsetTop - this.scrollElement.offsetTop
121   - };
  124 + });
122 125 });
123 126 this.titlesOffsetArr = offsetArr;
124 127 },
... ...