Merge pull request #3992 from lison16/anchor

解决anchor组件在页面没有点击锚点时报错的问题
This commit is contained in:
Aresn 2018-06-30 15:08:45 +08:00 committed by GitHub
commit 8fe474b951
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 15 deletions

View file

@ -7,6 +7,7 @@
<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
<AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
</AnchorLink>
<AnchorLink href="#lishi" title="李氏专跳"/>
<AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
</Anchor>
</div>
@ -32,6 +33,8 @@
</Panel>
</Collapse>
</template>
<h1 id="lishi">李氏专跳</h1>
<p v-for="i in 100" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
<!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
</div>
@ -58,6 +61,8 @@
</template>
<h1 id="new-link">这是新添加的哦哦哦哦哦 </h1>
<p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
<h1 id="lishi">李氏专跳</h1>
<p v-for="i in 50" :key="`chinese-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
</div>
</div>

View file

@ -32,7 +32,14 @@ export default {
},
methods: {
goAnchor () {
this.anchorCom.turnTo(this.href);
this.currentLink = this.href;
this.anchorCom.$emit('on-select', this.href);
const isRoute = this.$router;
if (isRoute) {
this.$router.push(this.href);
} else {
window.location.href = this.href;
}
}
},
mounted () {

View file

@ -11,7 +11,7 @@
</component>
</template>
<script>
import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
import { scrollTop, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
import { on, off } from '../../utils/dom';
export default {
name: 'Anchor',
@ -25,7 +25,6 @@ export default {
prefix: 'ivu-anchor',
isAffixed: false, // current affixed state
inkTop: 0,
linkHeight: 0,
animating: false, // if is scrolling now
currentLink: '', // current show link => #href -> currentLink = #href
currentId: '', // current show title id => #href -> currentId = href
@ -83,16 +82,10 @@ export default {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
this.getCurrentScrollAtTitleId(scrollTop);
},
turnTo (href) {
this.currentLink = href;
this.$router.push({
path: href
});
this.$emit('on-select', href);
},
handleHashChange () {
const url = window.location.href;
const sharpLinkMatch = sharpMatcherRegx.exec(url);
if (!sharpLinkMatch) return;
this.currentLink = sharpLinkMatch[0];
this.currentId = sharpLinkMatch[1];
},
@ -158,8 +151,7 @@ export default {
off(window, 'hashchange', this.handleHashChange);
},
init () {
const anchorLink = findComponentDownward(this, 'AnchorLink');
this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0;
// const anchorLink = findComponentDownward(this, 'AnchorLink');
this.handleHashChange();
this.$nextTick(() => {
this.removeListener();
@ -177,7 +169,9 @@ export default {
watch: {
'$route' () {
this.handleHashChange();
this.handleScrollTo();
this.$nextTick(() => {
this.handleScrollTo();
});
},
container () {
this.init();

View file

@ -43,4 +43,4 @@ export default {
}
}
}
};
};

View file

@ -48,4 +48,4 @@
@import "divider";
@import "anchor";
@import "time";
@import "cell";
@import "cell";