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 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 41 insertions(+), 10 deletions(-)
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