代码更新

surprise

2024-04-09 054e8e04d08bef2dc343376827aca7913e17f4f4

代码更新

 public/DeveloperGuide/Doc/HomeDoc.html

@@ -7,6 +7,7 @@
  <title>Bootstrap Documentation</title>
  <link rel="stylesheet" href="./css/index.css" />
  <script src="./js/jquery.min.js"></script>
  
  <style>
    .HtmlBox {
      padding: 30px;
@@ -116,7 +117,7 @@
      Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with
      jsDelivr and a template starter page.
    </p>
    <h2>Quick start</h2>
    <h1>Quick start</h1>
    <p>Looking to quickly add Bootstrap to your project? Use jsDelivr, provided for free by the folks at jsDelivr. Using
      a package manager or need to download the source files? <a href="/getting-started/download/">Head to the downloads
        page.</a></p>
@@ -131,7 +132,7 @@
            }
      </code></pre>
    </div>
    <h3>JS</h3>
    <h1>JS</h1>
    <p>Many of our components require the use of JavaScript to function. Specifically, they require <a
        href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript
      plugins. Place the following <code class="highlighter-rouge">&lt;script&gt;</code>s near the end of your pages,
@@ -150,7 +151,7 @@
    <p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below.
      If you’re at all unsure about the general page structure, keep reading for an example page template.</p>

    <img src="http://192.168.11.87:8080/DeveloperGuide/background/1111.png" class="img" alt="Responsive image">
    <img src="http://192.168.11.88:8080/DeveloperGuide/background/1111.png" class="img" alt="Responsive image">
    <details>
      <summary class="summary">Show components requiring JavaScript</summary>
      <ul class="HtmlBox_Ul">
@@ -168,7 +169,7 @@


    </details>
    <h2>Starter template</h2>
    <h1>Starter template</h1>

    <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5
      doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages

 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,14 +49,14 @@
    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("全部展开");
const unfoldflag = ref(true);
const docHtml = ref(null);
const menOption = ref([]);
const menuFlag= ref(null)
const menuFlag = ref(null)
const setunfoldflagChange = () => {
    unfoldflag.value = !unfoldflag.value;
    treeTitle.value = unfoldflag.value ? "全部收起" : "全部展开"
@@ -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;