use link.js for anchor
This commit is contained in:
parent
2525733729
commit
576329cc63
3 changed files with 15 additions and 17 deletions
|
@ -5,9 +5,11 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import mixinsLink from '../../mixins/link';
|
||||||
export default {
|
export default {
|
||||||
name: 'AnchorLink',
|
name: 'AnchorLink',
|
||||||
inject: ['anchorCom'],
|
inject: ['anchorCom'],
|
||||||
|
mixins: [ mixinsLink ],
|
||||||
props: {
|
props: {
|
||||||
href: String,
|
href: String,
|
||||||
title: String
|
title: String
|
||||||
|
@ -31,8 +33,10 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goAnchor () {
|
goAnchor (event) {
|
||||||
this.anchorCom.turnTo(this.href);
|
this.currentLink = this.href;
|
||||||
|
this.$emit('on-select', this.href);
|
||||||
|
this.handleCheckClick(event);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
|
@ -25,7 +25,6 @@ export default {
|
||||||
prefix: 'ivu-anchor',
|
prefix: 'ivu-anchor',
|
||||||
isAffixed: false, // current affixed state
|
isAffixed: false, // current affixed state
|
||||||
inkTop: 0,
|
inkTop: 0,
|
||||||
linkHeight: 0,
|
|
||||||
animating: false, // if is scrolling now
|
animating: false, // if is scrolling now
|
||||||
currentLink: '', // current show link => #href -> currentLink = #href
|
currentLink: '', // current show link => #href -> currentLink = #href
|
||||||
currentId: '', // current show title id => #href -> currentId = href
|
currentId: '', // current show title id => #href -> currentId = href
|
||||||
|
@ -83,13 +82,6 @@ export default {
|
||||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
|
||||||
this.getCurrentScrollAtTitleId(scrollTop);
|
this.getCurrentScrollAtTitleId(scrollTop);
|
||||||
},
|
},
|
||||||
turnTo (href) {
|
|
||||||
this.currentLink = href;
|
|
||||||
this.$router.push({
|
|
||||||
path: href
|
|
||||||
});
|
|
||||||
this.$emit('on-select', href);
|
|
||||||
},
|
|
||||||
handleHashChange () {
|
handleHashChange () {
|
||||||
const url = window.location.href;
|
const url = window.location.href;
|
||||||
const sharpLinkMatch = sharpMatcherRegx.exec(url);
|
const sharpLinkMatch = sharpMatcherRegx.exec(url);
|
||||||
|
@ -159,8 +151,7 @@ export default {
|
||||||
off(window, 'hashchange', this.handleHashChange);
|
off(window, 'hashchange', this.handleHashChange);
|
||||||
},
|
},
|
||||||
init () {
|
init () {
|
||||||
const anchorLink = findComponentDownward(this, 'AnchorLink');
|
// const anchorLink = findComponentDownward(this, 'AnchorLink');
|
||||||
this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0;
|
|
||||||
this.handleHashChange();
|
this.handleHashChange();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.removeListener();
|
this.removeListener();
|
||||||
|
@ -178,7 +169,9 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
'$route' () {
|
'$route' () {
|
||||||
this.handleHashChange();
|
this.handleHashChange();
|
||||||
this.handleScrollTo();
|
this.$nextTick(() => {
|
||||||
|
this.handleScrollTo();
|
||||||
|
})
|
||||||
},
|
},
|
||||||
container () {
|
container () {
|
||||||
this.init();
|
this.init();
|
||||||
|
|
|
@ -26,14 +26,15 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
handleClick () {
|
handleClick () {
|
||||||
const isRoute = this.$router;
|
const isRoute = this.$router;
|
||||||
|
let href = this.to || this.href;
|
||||||
if (isRoute) {
|
if (isRoute) {
|
||||||
this.replace ? this.$router.replace(this.to) : this.$router.push(this.to);
|
this.replace ? this.$router.replace(href) : this.$router.push(href);
|
||||||
} else {
|
} else {
|
||||||
window.location.href = this.to;
|
window.location.href = href;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleCheckClick (event) {
|
handleCheckClick (event) {
|
||||||
if (this.to) {
|
if (this.to || this.href) {
|
||||||
if (this.target === '_blank') {
|
if (this.target === '_blank') {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Add table
Reference in a new issue