Skip to content

Commit e91928d

Browse files
zhangying-zy618zhangying-zy618
committed
【示例网站】【产品的markdown滚动】
1 parent 11ff7d5 commit e91928d

File tree

5 files changed

+387
-285
lines changed

5 files changed

+387
-285
lines changed

‎website/public/static/demo/config/config-headers.json‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@
3737
"hightlights": [[true, false, false, false, false, false, false, false, false]],
3838
"routes": [
3939
[
40-
"/component/product/component/introduction",
41-
"/component/product/component/download",
42-
"/component/product/component/developEnvironment",
43-
"/component/product/component/authorization",
44-
"/component/product/component/moduleIntroduction",
45-
"/component/product/component/relatedProduct",
46-
"/component/product/component/thirdPartyProducts",
47-
"/component/product/component/newFeatures",
48-
"/component/product/component/startDevelop"
40+
"/product/component/introduction",
41+
"/product/component/download",
42+
"/product/component/developEnvironment",
43+
"/product/component/authorization",
44+
"/product/component/moduleIntroduction",
45+
"/product/component/relatedProduct",
46+
"/product/component/thirdPartyProducts",
47+
"/product/component/newFeatures",
48+
"/product/component/startDevelop"
4949
]
5050
]
5151
},
@@ -69,7 +69,7 @@
6969
]
7070
],
7171
"hightlights": [[false, false, false, false, false, false, false, false, false, false, false, false]],
72-
"routes": [["/guide/component/development_mapboxgl", "", "", "", "", "", "", "", "", "", "", ""]]
72+
"routes": [["/guide/component/development_component", "", "", "", "", "", "", "", "", "", "", ""]]
7373
},
7474
{
7575
"title": "在线示例",
@@ -104,15 +104,15 @@
104104
"hightlights": [[true, false, false, false, false, false, false, false, false]],
105105
"routes": [
106106
[
107-
"/component/product/cesium/produce_cesium",
108-
"/component/product/cesium/download",
109-
"/component/product/cesium/developEnvironment",
110-
"/component/product/cesium/authorization",
111-
"/component/product/cesium/moduleIntroduction",
112-
"/component/product/cesium/relatedProduct",
113-
"/component/product/cesium/thirdPartyProducts",
114-
"/component/product/cesium/newFeatures",
115-
"/component/product/cesium/startDevelop"
107+
"/product/cesium/produce_cesium",
108+
"/product/cesium/download",
109+
"/product/cesium/developEnvironment",
110+
"/product/cesium/authorization",
111+
"/product/cesium/moduleIntroduction",
112+
"/product/cesium/relatedProduct",
113+
"/product/cesium/thirdPartyProducts",
114+
"/product/cesium/newFeatures",
115+
"/product/cesium/startDevelop"
116116
]
117117
]
118118
},
@@ -231,15 +231,15 @@
231231
"hightlights": [[true, false, false, false, false, false, false, false, false]],
232232
"routes": [
233233
[
234-
"/component/product/mapboxgl/produce_mapboxgl",
235-
"/component/product/mapboxgl/download",
236-
"/component/product/mapboxgl/developEnvironment",
237-
"/component/product/mapboxgl/authorization",
238-
"/component/product/mapboxgl/moduleIntroduction",
239-
"/component/product/mapboxgl/relatedProduct",
240-
"/component/product/mapboxgl/thirdPartyProducts",
241-
"/component/product/mapboxgl/newFeatures",
242-
"/component/product/mapboxgl/startDevelop"
234+
"/product/mapboxgl/produce_mapboxgl",
235+
"/product/mapboxgl/download",
236+
"/product/mapboxgl/developEnvironment",
237+
"/product/mapboxgl/authorization",
238+
"/product/mapboxgl/moduleIntroduction",
239+
"/product/mapboxgl/relatedProduct",
240+
"/product/mapboxgl/thirdPartyProducts",
241+
"/product/mapboxgl/newFeatures",
242+
"/product/mapboxgl/startDevelop"
243243
]
244244
]
245245
},

‎website/src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export const routes = [
154154
name: '*'
155155
},
156156
{
157-
path: '/component/product/:mapmode/:file',
157+
path: '/product/:mapmode/:file',
158158
component: Product,
159159
name: 'product'
160160
},

‎website/src/views/component/product.vue‎

Lines changed: 107 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,18 @@
11
<template>
2-
<el-container>
3-
<el-header
4-
style="padding:0px;"
5-
:height="mobile?'48px':'64px'"
6-
>
2+
<el-container class="mapgis-product-wrapper">
3+
<el-header style="padding:0px;" :height="mobile?'48px':'64px'">
74
<Header></Header>
85
</el-header>
96
<div class="product-header">
10-
<span class="product-span">组件</span>
7+
<span class="product-span">{{ asideMenu.title }}</span>
118
</div>
129
<el-container class="product-container">
13-
<el-aside
14-
class="aside-scroll-content"
15-
>
16-
<el-scrollbar
17-
class="element-scroll-content"
18-
wrapStyle="overflow-x: hidden;"
19-
viewStyle="overflow-y: hidden;"
20-
>
10+
<el-aside class="aside-scroll-content">
11+
<el-scrollbar class="element-scroll-content" wrapStyle="overflow-x: hidden;" viewStyle="overflow-y: hidden;">
2112
<div class="header-menu-col">
2213
<span class="strong">{{ asideMenu.title }}</span>
23-
<div class="header-menu-links" v-for="(link, i) in asideMenu.links" :key="i">
24-
<div class="header-menu-link" v-for="(l, j) in link" :key="j">
25-
<div class="header-menu-link-text">
26-
<el-badge type="success" :value="asideMenu.hightlights[i][j] ? hint : ''" class="menu-badge">
27-
<a class="header-menu-link-text" :href="asideMenu.routes[i][j]">
28-
<span :class="{ 'light-subtitle': light }">{{ l }}</span>
29-
</a>
30-
</el-badge>
31-
</div>
32-
</div>
14+
<div class="header-menu-col">
15+
<div id="develop-markdown-toc"></div>
3316
</div>
3417
</div>
3518
</el-scrollbar>
@@ -40,9 +23,14 @@
4023
:style="{padding: '2px 1vw'}"
4124
:source="markdown"
4225
:html="true"
43-
:toc="false"
26+
:toc="true"
27+
:toc-first-level="2"
28+
toc-id="develop-markdown-toc"
29+
toc-class="mapgis-toc-class"
30+
:toc-anchor-link="true"
4431
:linkify="true"
4532
@rendered="markdownRendered"
33+
@toc-rendered="tocRendered"
4634
></vue-markdown>
4735
<el-backtop></el-backtop>
4836
</el-main>
@@ -74,7 +62,10 @@ export default {
7462
asideMenu: "",
7563
light: true,
7664
hint: '新',
77-
markdown: "> `暂无说明`, 请检查改目录下的帮助说明是否存在",
65+
markdown: "> `暂无说明`, 请检查该目录下的帮助说明是否存在",
66+
mode: "",
67+
isContentFinish: false,
68+
isTocFinish: false
7869
}
7970
},
8071
components: {
@@ -84,20 +75,51 @@ export default {
8475
},
8576
mounted() {
8677
this.initConfig();
78+
this.initScroll();
79+
},
80+
watch: {
81+
"$route.path"() {
82+
this.initConfig();
83+
}
8784
},
8885
methods: {
86+
initScroll() {
87+
/**
88+
* 目标元素和视窗viewport的交集的变化的方法API
89+
* @type {IntersectionObserver}
90+
*/
91+
const observer = new IntersectionObserver((entries) => {
92+
entries.forEach((entry) => {
93+
let id = entry.target.getAttribute('id');
94+
id = encodeURI(id);
95+
//intersectionRatio：目标元素出现在视窗的比例
96+
if (entry.intersectionRatio > 0) {
97+
document.querySelector(`li a[href="#${id}"]`).parentElement.classList.add('active');
98+
} else {
99+
document.querySelector(`li a[href="#${id}"]`).parentElement.classList.remove('active');
100+
}
101+
});
102+
});
103+
//observer.observe():监听当前所有的h2[id]
104+
document.querySelectorAll('h2[id]').forEach((section) => {
105+
observer.observe(section);
106+
});
107+
document.querySelectorAll('h3[id]').forEach((section) => {
108+
observer.observe(section);
109+
});
110+
},
89111
initConfig() {
90112
let anchors = location.href.split("#");
91113
if (!anchors || anchors.length < 2) return;
92114
93115
let hrefs = anchors[1].split("/").slice(2);
94-
let mode = this.getMapMode();
116+
this.mode = this.getMapMode();
95117
let file = hrefs[hrefs.length - 1];
96118
let first;
97119
if (hrefs.length <= 3) {
98120
first = hrefs[hrefs.length - 3];
99121
}
100-
this.resetHtml(mode, file, first);
122+
this.resetHtml(this.mode, file, first);
101123
this.getAsideList();
102124
},
103125
getMapMode() {
@@ -138,24 +160,69 @@ export default {
138160
axios.get(asideUrl).then(response => {
139161
let temp = response.data;
140162
for (let i in temp) {
141-
if ("组件" === (temp[i].title).toLowerCase()) {
163+
if (self.mode === "component") {
164+
self.mode = "组件";
165+
}
166+
if (self.mode === (temp[i].title).toLowerCase()) {
142167
self.asideContent = temp[i];
143168
break;
144169
}
145170
}
146171
self.asideMenu = self.asideContent.menus[0];
147172
});
148173
},
174+
/**
175+
* @rendered: markdown内容已渲染完毕时调用下面方法
176+
*/
149177
markdownRendered() {
178+
this.isContentFinish = true;
179+
if (this.isTocFinish && this.isContentFinish) {
180+
this.initScroll();
181+
}
150182
this.$nextTick(() => {
151183
Prism.highlightAll();
152184
});
153185
},
186+
/**
187+
* @toc-rendered: toc目录渲染完成时调用下面方法
188+
*/
189+
tocRendered() {
190+
this.isTocFinish = true;
191+
if (this.isTocFinish && this.isContentFinish) {
192+
this.initScroll();
193+
}
194+
}
154195
}
155196
}
156197
</script>
157198

158-
<style scoped lang="scss">
199+
<style lang="scss">
200+
.mapgis-product-wrapper {
201+
.mapgis-toc-class {
202+
ul {
203+
list-style-type: none;
204+
padding-left: 16px;
205+
margin: 8px 0px;
206+
}
207+
208+
li {
209+
list-style-type: none;
210+
margin: 8px 0px;
211+
}
212+
213+
a {
214+
color: #3f454d;
215+
}
216+
217+
.active {
218+
border-left: 3px solid #000000;
219+
padding-left: 6px;
220+
color: #000000;
221+
font-weight: bold;
222+
}
223+
}
224+
}
225+
159226
.product-header {
160227
padding: 0;
161228
height: 240px !important;
@@ -209,10 +276,12 @@ export default {
209276
.light-subtitle {
210277
color: #3C4858 !important;
211278
}
212-
.header-menu-link{
279+
280+
.header-menu-link {
213281
margin: 4px 0px;
214282
width: fit-content;
215283
height: fit-content;
284+
216285
span {
217286
width: 60px;
218287
height: 14px;
@@ -222,7 +291,12 @@ export default {
222291
line-height: 30px;
223292
}
224293
}
225-
.header-menu-col{
226-
padding: 5px 90px;
294+
295+
.header-menu-col {
296+
padding: 5px 5px;
297+
}
298+
299+
#develop-markdown-toc {
300+
width: fit-content;
227301
}
228302
</style>

0 commit comments

Comments
 (0)