From 054e8e04d08bef2dc343376827aca7913e17f4f4 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 09 四月 2024 14:49:16 +0800
Subject: [PATCH] 代码更新
---
src/views/HomeDoc.vue | 51 +++++++++++++++++++++++++++++++++++++++++----------
public/DeveloperGuide/Doc/HomeDoc.html | 9 +++++----
2 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/public/DeveloperGuide/Doc/HomeDoc.html b/public/DeveloperGuide/Doc/HomeDoc.html
index 871d41e..6db31e8 100644
--- a/public/DeveloperGuide/Doc/HomeDoc.html
+++ b/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鈥檚 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"><script></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鈥檙e 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
diff --git a/src/views/HomeDoc.vue b/src/views/HomeDoc.vue
index 5a831fa..f8b6115 100644
--- a/src/views/HomeDoc.vue
+++ b/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;
--
Gitblit v1.9.3