Commit 8fe474b951718fbf3cba414f676d13dbd9b78037
Committed by
GitHub
GitHub
Merge pull request #3992 from lison16/anchor
解决anchor组件在页面没有点击锚点时报错的问题
Showing
5 changed files
with
21 additions
and
15 deletions
Show diff stats
examples/routers/anchor.vue
| ... | ... | @@ -7,6 +7,7 @@ |
| 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> |
| 10 | + <AnchorLink href="#lishi" title="李氏专跳"/> | |
| 10 | 11 | <AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/> |
| 11 | 12 | </Anchor> |
| 12 | 13 | </div> |
| ... | ... | @@ -32,6 +33,8 @@ |
| 32 | 33 | </Panel> |
| 33 | 34 | </Collapse> |
| 34 | 35 | </template> |
| 36 | + <h1 id="lishi">李氏专跳</h1> | |
| 37 | + <p v-for="i in 100" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p> | |
| 35 | 38 | <!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1> |
| 36 | 39 | <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> --> |
| 37 | 40 | </div> |
| ... | ... | @@ -58,6 +61,8 @@ |
| 58 | 61 | </template> |
| 59 | 62 | <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1> |
| 60 | 63 | <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> |
| 64 | + <h1 id="lishi">李氏专跳</h1> | |
| 65 | + <p v-for="i in 50" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p> | |
| 61 | 66 | </div> |
| 62 | 67 | |
| 63 | 68 | </div> | ... | ... |
src/components/anchor/anchor-link.vue
| ... | ... | @@ -32,7 +32,14 @@ export default { |
| 32 | 32 | }, |
| 33 | 33 | methods: { |
| 34 | 34 | goAnchor () { |
| 35 | - this.anchorCom.turnTo(this.href); | |
| 35 | + this.currentLink = this.href; | |
| 36 | + this.anchorCom.$emit('on-select', this.href); | |
| 37 | + const isRoute = this.$router; | |
| 38 | + if (isRoute) { | |
| 39 | + this.$router.push(this.href); | |
| 40 | + } else { | |
| 41 | + window.location.href = this.href; | |
| 42 | + } | |
| 36 | 43 | } |
| 37 | 44 | }, |
| 38 | 45 | mounted () { | ... | ... |
src/components/anchor/anchor.vue
| ... | ... | @@ -11,7 +11,7 @@ |
| 11 | 11 | </component> |
| 12 | 12 | </template> |
| 13 | 13 | <script> |
| 14 | -import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist'; | |
| 14 | +import { scrollTop, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist'; | |
| 15 | 15 | import { on, off } from '../../utils/dom'; |
| 16 | 16 | export default { |
| 17 | 17 | name: 'Anchor', |
| ... | ... | @@ -25,7 +25,6 @@ export default { |
| 25 | 25 | prefix: 'ivu-anchor', |
| 26 | 26 | isAffixed: false, // current affixed state |
| 27 | 27 | inkTop: 0, |
| 28 | - linkHeight: 0, | |
| 29 | 28 | animating: false, // if is scrolling now |
| 30 | 29 | currentLink: '', // current show link => #href -> currentLink = #href |
| 31 | 30 | currentId: '', // current show title id => #href -> currentId = href |
| ... | ... | @@ -83,16 +82,10 @@ export default { |
| 83 | 82 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop; |
| 84 | 83 | this.getCurrentScrollAtTitleId(scrollTop); |
| 85 | 84 | }, |
| 86 | - turnTo (href) { | |
| 87 | - this.currentLink = href; | |
| 88 | - this.$router.push({ | |
| 89 | - path: href | |
| 90 | - }); | |
| 91 | - this.$emit('on-select', href); | |
| 92 | - }, | |
| 93 | 85 | handleHashChange () { |
| 94 | 86 | const url = window.location.href; |
| 95 | 87 | const sharpLinkMatch = sharpMatcherRegx.exec(url); |
| 88 | + if (!sharpLinkMatch) return; | |
| 96 | 89 | this.currentLink = sharpLinkMatch[0]; |
| 97 | 90 | this.currentId = sharpLinkMatch[1]; |
| 98 | 91 | }, |
| ... | ... | @@ -158,8 +151,7 @@ export default { |
| 158 | 151 | off(window, 'hashchange', this.handleHashChange); |
| 159 | 152 | }, |
| 160 | 153 | init () { |
| 161 | - const anchorLink = findComponentDownward(this, 'AnchorLink'); | |
| 162 | - this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0; | |
| 154 | + // const anchorLink = findComponentDownward(this, 'AnchorLink'); | |
| 163 | 155 | this.handleHashChange(); |
| 164 | 156 | this.$nextTick(() => { |
| 165 | 157 | this.removeListener(); |
| ... | ... | @@ -177,7 +169,9 @@ export default { |
| 177 | 169 | watch: { |
| 178 | 170 | '$route' () { |
| 179 | 171 | this.handleHashChange(); |
| 180 | - this.handleScrollTo(); | |
| 172 | + this.$nextTick(() => { | |
| 173 | + this.handleScrollTo(); | |
| 174 | + }); | |
| 181 | 175 | }, |
| 182 | 176 | container () { |
| 183 | 177 | this.init(); | ... | ... |
src/mixins/link.js