Merge pull request #3992 from lison16/anchor

解决anchor组件在页面没有点击锚点时报错的问题

Merge pull request #3992 from lison16/anchor
解决anchor组件在页面没有点击锚点时报错的问题
Aresn · GitHub
2 parents b216f33c 7ff2f71a
Showing 5 changed files with 21 additions and 15 deletions Show diff stats
examples/routers/anchor.vue
src/components/anchor/anchor-link.vue
src/components/anchor/anchor.vue
src/mixins/link.js
src/styles/components/index.less
@@ -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>
@@ -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 () {
@@ -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();
@@ -43,4 +43,4 @@ export default {
             }
         }
     }
-};
 \ No newline at end of file
+};
@@ -48,4 +48,4 @@
 @import "divider";
 @import "anchor";
 @import "time";
-@import "cell";
 \ No newline at end of file
+@import "cell";