commit
8fe474b951
5 changed files with 21 additions and 15 deletions
|
@ -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>
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
|
@ -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.$nextTick(() => {
|
||||||
this.handleScrollTo();
|
this.handleScrollTo();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
container () {
|
container () {
|
||||||
this.init();
|
this.init();
|
||||||
|
|
Loading…
Add table
Reference in a new issue