代码更新

surprise

2024-04-09 054e8e04d08bef2dc343376827aca7913e17f4f4

 src/views/HomeDoc.vue

@@ -1,5 +1,5 @@
<template>
    <div class="contentBox">
    <div id="scrollable" class="contentBox" @scroll="handleScroll($event)">

        <div class="leftTree">
            <el-input v-model="filterText" placeholder="目录搜索..."></el-input>
@@ -23,7 +23,7 @@
            <div class="treeMenu">
                <div class="menuBox">
                    <ul>
                        <li class="meuLi" :class="{ 'menuLiChange': menuFlag == item.name }"
                        <li class="meuLi" @click="setMenuCLick(item)" :class="{ 'menuLiChange': menuFlag == item.name }"
                            v-for="(item, index) in menOption" :key="index">{{ item.name }}</li>
                    </ul>
                </div>
@@ -49,7 +49,7 @@
    ArrowDownBold

} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import { ElMessage, configProviderProps } from 'element-plus'
import axios from 'axios'
const filterText = ref("");
const treeTitle = ref("全部展开");
@@ -64,9 +64,10 @@
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) {
@@ -75,7 +76,8 @@
            })
        }
        menOption.value = std;
        menuFlag.value= std[0].name
        menuFlag.value = std[0].name;

    })

    // window.addEventListener("click", (e) => {
@@ -94,8 +96,37 @@

    // })
}
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) => {


}

@@ -119,8 +150,8 @@
    padding-top: 60px;
    cursor: pointer;
    display: flex;
    overflow: auto;

    overflow: scroll;
overflow-x: hidden;
    .leftTree {
        height: calc(100% - 40px);
        width: 200px;
@@ -157,12 +188,12 @@
        display: flex;

        .treeMenu {
            width: 10%;
            width: 240px;
            height: 100%;

            // position: relative;
            .menuBox {
                width: calc(10% - 100px);
                width: 200px;
                // right: 20px;
                margin-top: 20px;
                padding: 20px;