Commit 576329cc63bfd6f32d7f176d177cf4a7199fc436
1 parent
25257337
use link.js for anchor
Showing
3 changed files
with
15 additions
and
17 deletions
Show diff stats
src/components/anchor/anchor-link.vue
| @@ -5,9 +5,11 @@ | @@ -5,9 +5,11 @@ | ||
| 5 | </div> | 5 | </div> |
| 6 | </template> | 6 | </template> |
| 7 | <script> | 7 | <script> |
| 8 | +import mixinsLink from '../../mixins/link'; | ||
| 8 | export default { | 9 | export default { |
| 9 | name: 'AnchorLink', | 10 | name: 'AnchorLink', |
| 10 | inject: ['anchorCom'], | 11 | inject: ['anchorCom'], |
| 12 | + mixins: [ mixinsLink ], | ||
| 11 | props: { | 13 | props: { |
| 12 | href: String, | 14 | href: String, |
| 13 | title: String | 15 | title: String |
| @@ -31,8 +33,10 @@ export default { | @@ -31,8 +33,10 @@ export default { | ||
| 31 | } | 33 | } |
| 32 | }, | 34 | }, |
| 33 | methods: { | 35 | methods: { |
| 34 | - goAnchor () { | ||
| 35 | - this.anchorCom.turnTo(this.href); | 36 | + goAnchor (event) { |
| 37 | + this.currentLink = this.href; | ||
| 38 | + this.$emit('on-select', this.href); | ||
| 39 | + this.handleCheckClick(event); | ||
| 36 | } | 40 | } |
| 37 | }, | 41 | }, |
| 38 | mounted () { | 42 | mounted () { |
src/components/anchor/anchor.vue
| @@ -25,7 +25,6 @@ export default { | @@ -25,7 +25,6 @@ export default { | ||
| 25 | prefix: 'ivu-anchor', | 25 | prefix: 'ivu-anchor', |
| 26 | isAffixed: false, // current affixed state | 26 | isAffixed: false, // current affixed state |
| 27 | inkTop: 0, | 27 | inkTop: 0, |
| 28 | - linkHeight: 0, | ||
| 29 | animating: false, // if is scrolling now | 28 | animating: false, // if is scrolling now |
| 30 | currentLink: '', // current show link => #href -> currentLink = #href | 29 | currentLink: '', // current show link => #href -> currentLink = #href |
| 31 | currentId: '', // current show title id => #href -> currentId = href | 30 | currentId: '', // current show title id => #href -> currentId = href |
| @@ -83,13 +82,6 @@ export default { | @@ -83,13 +82,6 @@ export default { | ||
| 83 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop; | 82 | const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop; |
| 84 | this.getCurrentScrollAtTitleId(scrollTop); | 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 | handleHashChange () { | 85 | handleHashChange () { |
| 94 | const url = window.location.href; | 86 | const url = window.location.href; |
| 95 | const sharpLinkMatch = sharpMatcherRegx.exec(url); | 87 | const sharpLinkMatch = sharpMatcherRegx.exec(url); |
| @@ -159,8 +151,7 @@ export default { | @@ -159,8 +151,7 @@ export default { | ||
| 159 | off(window, 'hashchange', this.handleHashChange); | 151 | off(window, 'hashchange', this.handleHashChange); |
| 160 | }, | 152 | }, |
| 161 | init () { | 153 | init () { |
| 162 | - const anchorLink = findComponentDownward(this, 'AnchorLink'); | ||
| 163 | - this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0; | 154 | + // const anchorLink = findComponentDownward(this, 'AnchorLink'); |
| 164 | this.handleHashChange(); | 155 | this.handleHashChange(); |
| 165 | this.$nextTick(() => { | 156 | this.$nextTick(() => { |
| 166 | this.removeListener(); | 157 | this.removeListener(); |
| @@ -178,7 +169,9 @@ export default { | @@ -178,7 +169,9 @@ export default { | ||
| 178 | watch: { | 169 | watch: { |
| 179 | '$route' () { | 170 | '$route' () { |
| 180 | this.handleHashChange(); | 171 | this.handleHashChange(); |
| 181 | - this.handleScrollTo(); | 172 | + this.$nextTick(() => { |
| 173 | + this.handleScrollTo(); | ||
| 174 | + }) | ||
| 182 | }, | 175 | }, |
| 183 | container () { | 176 | container () { |
| 184 | this.init(); | 177 | this.init(); |
src/mixins/link.js
| @@ -26,14 +26,15 @@ export default { | @@ -26,14 +26,15 @@ export default { | ||
| 26 | methods: { | 26 | methods: { |
| 27 | handleClick () { | 27 | handleClick () { |
| 28 | const isRoute = this.$router; | 28 | const isRoute = this.$router; |
| 29 | + let href = this.to || this.href; | ||
| 29 | if (isRoute) { | 30 | if (isRoute) { |
| 30 | - this.replace ? this.$router.replace(this.to) : this.$router.push(this.to); | 31 | + this.replace ? this.$router.replace(href) : this.$router.push(href); |
| 31 | } else { | 32 | } else { |
| 32 | - window.location.href = this.to; | 33 | + window.location.href = href; |
| 33 | } | 34 | } |
| 34 | }, | 35 | }, |
| 35 | handleCheckClick (event) { | 36 | handleCheckClick (event) { |
| 36 | - if (this.to) { | 37 | + if (this.to || this.href) { |
| 37 | if (this.target === '_blank') { | 38 | if (this.target === '_blank') { |
| 38 | return false; | 39 | return false; |
| 39 | } else { | 40 | } else { |
| @@ -43,4 +44,4 @@ export default { | @@ -43,4 +44,4 @@ export default { | ||
| 43 | } | 44 | } |
| 44 | } | 45 | } |
| 45 | } | 46 | } |
| 46 | -}; | ||
| 47 | \ No newline at end of file | 47 | \ No newline at end of file |
| 48 | +}; |