长文章阅读,使用vue + elementui tree
左侧导航,点击后右侧跳转到相应位置。
<template>
<div class="flex articleBox">
<div class="leftBox">
<el-tree :data="list" ref="tree" node-key="id" :props="defaultProps" default-expand-all highlight-current @node-click="handleNodeClick"></el-tree>
</div>
<div class="rightBox">
<div v-for="(item,index) in 13" class="contentBox" :id="'a'+(index+1)">{{index+1}}</div>
</div>
</div>
</template>
<script>
// import api from '@/services/other'
export default {
data() {
return {
//baseUrl: this.$store.state.baseUrl,
list: [
{
id:1,
label: '一级 1',
children: [{
id:2,
label: '二级 1-1',
children: [{
id:3,
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
id:4,
children: [{
label: '二级 2-1',
id:5,
children: [{
id:6,
label: '三级 2-1-1'
}]
}, {
id:7,
label: '二级 2-2',
children: [{
id:8,
label: '三级 2-2-1'
}]
}]
}, {
id:9,
label: '一级 3',
children: [{
id:10,
label: '二级 3-1',
children: [{
id:11,
label: '三级 3-1-1'
}]
}, {
id:12,
label: '二级 3-2',
children: [{
id:13,
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
long:[],
}
},
created() {
this.$nextTick(()=>{
for (let i = 0; i < 13; i++) {
this.long.push({id:i+1,top:document.getElementById("a"+(i+1)).offsetTop});
}
});
window.onscroll = ()=>{
setTimeout(()=>{
var st = document.documentElement.scrollTop || document.body.scrollTop;
this.comparenum(st);
},200)
};
},
methods: {
comparenum(num){
for (let i = 0; i < this.long.length; i++) {
if(num<this.long[i].top){
this.$refs.tree.setCurrentKey(this.long[i].id);
break;
}
}
},
handleNodeClick(data) {
console.log(data);
location.href = "/article?#a"+data.id;
}
},
}
</script>
<style lang="scss">
.contentBox{height:200px;border-top:1px solid #aaa;}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:red;}
.leftBox {
Box-sizing: border-Box;
width: 494px;position: sticky;top:0;
border-right: 1px solid #bbb;
padding: 45px 0;
}
.rightBox {
flex: 1;
Box-sizing: border-Box;
padding: 45px 70px;
}
.flex {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.articleBox{align-items:flex-start;}
</style>