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 | +}; |