use link.js for anchor

This commit is contained in:
zhigang.li 2018-06-29 18:10:14 +08:00
parent 2525733729
commit 576329cc63
3 changed files with 15 additions and 17 deletions

View file

@ -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 () {

View file

@ -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();

View file

@ -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 {