<template>
|
<div id="scrollable" class="contentBox" @scroll="handleScroll($event)">
|
|
<div class="leftTree">
|
<el-input v-model="filterText" placeholder="目录搜索..."></el-input>
|
<div class="treeTitle">
|
<div class="title1">目录</div>
|
<div class="title2" @click="setunfoldflagChange">
|
<span> {{ treeTitle }}</span>
|
|
<el-icon v-show="unfoldflag" style="color:gray">
|
<ArrowUpBold />
|
</el-icon>
|
<el-icon v-show="!unfoldflag" style="color:gray">
|
<ArrowDownBold />
|
</el-icon>
|
</div>
|
</div>
|
|
</div>
|
<div class="rightContent">
|
<div class="htmlContent" v-html="docHtml"></div>
|
<div class="treeMenu">
|
<div class="menuBox">
|
<ul>
|
<li class="meuLi" @click="setMenuCLick(item)" :class="{ 'menuLiChange': menuFlag == item.name }"
|
v-for="(item, index) in menOption" :key="index">{{ item.name }}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
} from "vue";
|
import {
|
ArrowUpBold,
|
ArrowDownBold
|
|
} from '@element-plus/icons-vue';
|
import { ElMessage, configProviderProps } from 'element-plus'
|
import axios from 'axios'
|
const filterText = ref("");
|
const treeTitle = ref("全部展开");
|
const unfoldflag = ref(true);
|
const docHtml = ref(null);
|
const menOption = ref([]);
|
const menuFlag = ref(null)
|
const setunfoldflagChange = () => {
|
unfoldflag.value = !unfoldflag.value;
|
treeTitle.value = unfoldflag.value ? "全部收起" : "全部展开"
|
}
|
const getDocHtml = async () => {
|
const url = config.htmUlr + "/DeveloperGuide/Doc/HomeDoc.html";
|
var data = await axios.get(url);
|
docHtml.value = data.data;
|
|
nextTick(() => {
|
|
var obj = document.querySelectorAll("h1")
|
var std = [];
|
for (var i in obj) {
|
std.push({
|
name: obj[i].innerHTML
|
})
|
}
|
menOption.value = std;
|
menuFlag.value = std[0].name;
|
|
})
|
|
// window.addEventListener("click", (e) => {
|
// if (e.target.id == "copy") {
|
// var children = e.target.parentNode.children;
|
// if (children.length <= 0) return;
|
// for (var i in children) {
|
|
// if (children[i].localName == "pre") {
|
|
// setCopyHandle( children[i].children[0].innerHTML)
|
// return
|
// }
|
// }
|
// }
|
|
// })
|
}
|
const handleScroll = (event) => {
|
const scrollTop = event.target.scrollTop; // 滚动位置;
|
var obj = document.querySelectorAll("h1");
|
if (obj.length <= 0) return;
|
console.log(scrollTop)
|
for(var i in obj){
|
if(scrollTop>=(obj[i].offsetTop-100) && scrollTop<(obj[i].offsetHeight+obj[i].offsetTop-100)){
|
menuFlag.value =obj[i].innerHTML;
|
}
|
}
|
}
|
const setMenuCLick = (res) => {
|
var obj = document.querySelectorAll("h1");
|
menuFlag.value = res.name;
|
for (var i in obj) {
|
if (obj[i].innerHTML == res.name) {
|
console.log(obj[i].offsetTop, obj[i].clientTop)
|
nextTick(() => {
|
var scrollable = document.getElementById('scrollable');
|
scrollable.scrollTo({
|
top: obj[i].offsetTop - 90,
|
behavior: 'smooth' // 平滑滚动
|
});
|
})
|
break;
|
}
|
}
|
|
};
|
const setCopyHandle = (content) => {
|
|
|
}
|
|
|
const setTreeDataStart = () => {
|
setunfoldflagChange();
|
getDocHtml();
|
};
|
|
onMounted(() => {
|
|
setTreeDataStart();
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
.contentBox {
|
width: 100%;
|
height: calc(100% - 60px);
|
padding-top: 60px;
|
cursor: pointer;
|
display: flex;
|
overflow: scroll;
|
overflow-x: hidden;
|
.leftTree {
|
height: calc(100% - 40px);
|
width: 200px;
|
border-right: 1px solid rgba(0, 0, 0, .06);
|
padding: 20px 28px;
|
|
.treeTitle {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
margin-top: 10px;
|
align-items: center;
|
|
.title1 {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
|
}
|
|
.title2 {
|
font-size: 10px;
|
|
span {
|
margin-right: 5px;
|
}
|
|
}
|
}
|
}
|
|
.rightContent {
|
flex: 1;
|
display: flex;
|
|
.treeMenu {
|
width: 240px;
|
height: 100%;
|
|
// position: relative;
|
.menuBox {
|
width: 200px;
|
// right: 20px;
|
margin-top: 20px;
|
padding: 20px;
|
position: absolute;
|
border-left: 1px solid rgba(0, 0, 0, .06);
|
|
.meuLi {
|
line-height: 40px;
|
padding-left: 5px;
|
;
|
border-left: 2px solid white;
|
}
|
|
.meuLi:hover {
|
color: #4b96e6;
|
}
|
|
.menuLiChange {
|
color: #4b96e6;
|
border-color: #4b96e6;
|
}
|
}
|
}
|
|
.htmlContent {
|
flex: 1;
|
height: 100%;
|
// overflow: auto;
|
}
|
}
|
|
|
}
|
</style>
|