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

View file

@ -32,7 +32,14 @@ export default {
}, },
methods: { methods: {
goAnchor () { 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 () { mounted () {

View file

@ -11,7 +11,7 @@
</component> </component>
</template> </template>
<script> <script>
import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist'; import { scrollTop, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
import { on, off } from '../../utils/dom'; import { on, off } from '../../utils/dom';
export default { export default {
name: 'Anchor', name: 'Anchor',
@ -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,16 +82,10 @@ 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);
if (!sharpLinkMatch) return;
this.currentLink = sharpLinkMatch[0]; this.currentLink = sharpLinkMatch[0];
this.currentId = sharpLinkMatch[1]; this.currentId = sharpLinkMatch[1];
}, },
@ -158,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();
@ -177,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

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

View file

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