Skip to content

C
cesium-frame
Commit 992d680b by jlc
Options

update：锚点功能的添加，点击子菜单跳转到对应的内容区域

parent 9fbbfaeb
Showing with 56 additions and 22 deletions
src/components/AsideMenuBar.vue
<template>
<el-aside>
<el-scrollbar>
<el-menu router unique-opened :collapse="isCollapse">
<el-menu unique-opened :collapse="isCollapse">
<a href="/" class="logo">
<img src="@/assets/vue.svg" alt="">
<h1>Cesium</h1>
......@@ -11,7 +11,7 @@
<el-icon><MapLocation /></el-icon>
<span>点的案例</span>
</template>
<el-menu-item v-for="item in elementPointData" :key="item.id" index="pointOne">
<el-menu-item v-for="item in elementPointData" :key="item.id" @click="goAnchor(item.title)">
<el-icon><View /></el-icon>
<span>{{item.title}}</span>
</el-menu-item>
......@@ -22,7 +22,7 @@
<el-icon><SemiSelect /></el-icon>
<span>线的案例</span>
</template>
<el-menu-item v-for="item in elementLineData" :key="item.id" index="lineOne">
<el-menu-item v-for="item in elementLineData" :key="item.id" @click="goAnchor(item.title)">
<el-icon><View /></el-icon>
<span>{{item.title}}</span>
</el-menu-item>
......@@ -33,7 +33,7 @@
<el-icon><Grid /></el-icon>
<span>面的案例</span>
</template>
<el-menu-item v-for="item in elementPlaneData" :key="item.id" index="planeOne">
<el-menu-item v-for="item in elementPlaneData" :key="item.id" @click="goAnchor(item.title)">
<el-icon><View /></el-icon>
<span>{{item.title}}</span>
</el-menu-item>
......@@ -61,6 +61,14 @@ const props = defineProps({
type: Boolean,
}
});
// 锚点定位跳转
function goAnchor(title) {
var anchor = document.getElementById(title);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
}
}
</script>
<style lang="scss" scoped>
......
src/views/ElementMap.js
export const elementPointMap = {
One: {
title: 'One',
title: 'pointOne',
pngUrl: '/src/assets/PointOne.png'
},
Two: {
title: 'Two',
title: 'pointTwo',
pngUrl: '/src/assets/PointOne.png'
},
Three: {
title: 'Three',
title: 'pointThree',
pngUrl: '/src/assets/PointOne.png'
},
Four: {
title: 'Four',
title: 'pointFour',
pngUrl: '/src/assets/PointOne.png'
},
Five: {
title: 'pointFive',
pngUrl: '/src/assets/PointOne.png'
},
Six: {
title: 'pointSix',
pngUrl: '/src/assets/PointOne.png'
}
}
export const elementLineMap = {
One: {
title: 'One',
title: 'lineOne',
pngUrl: '/src/assets/LineOne.png'
},
Two: {
title: 'Two',
title: 'lineTwo',
pngUrl: '/src/assets/LineOne.png'
},
Three: {
title: 'Three',
title: 'lineThree',
pngUrl: '/src/assets/LineOne.png'
},
Four: {
title: 'Four',
title: 'lineFour',
pngUrl: '/src/assets/LineOne.png'
},
Five: {
title: 'lineFive',
pngUrl: '/src/assets/LineOne.png'
},
Six: {
title: 'lineSix',
pngUrl: '/src/assets/LineOne.png'
}
}
export const elementPlaneMap = {
One: {
title: 'One',
title: 'planeOne',
pngUrl: '/src/assets/PlaneOne.png'
},
Two: {
title: 'Two',
title: 'planeTwo',
pngUrl: '/src/assets/PlaneOne.png'
},
Three: {
title: 'Three',
title: 'planeThree',
pngUrl: '/src/assets/PlaneOne.png'
},
Four: {
title: 'Four',
title: 'planeFour',
pngUrl: '/src/assets/PlaneOne.png'
},
Five: {
title: 'planeFive',
pngUrl: '/src/assets/PlaneOne.png'
},
Six: {
title: 'planeSix',
pngUrl: '/src/assets/PlaneOne.png'
}
}
\ No newline at end of file
src/views/indexView.vue
......@@ -3,8 +3,8 @@
<div class="mt-5">
<span class="text-base font-bold">点的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`point${item.title}`)" class="item-container">
<div>{{item.title}}</div>
<div v-for="item in elementPointData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
<div :id="item.title">{{item.title}}</div>
<img :src="item.pngUrl" width="250">
</div>
</div>
......@@ -12,8 +12,8 @@
<div class="mt-10">
<span class="text-base font-bold">线的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`line${item.title}`)" class="item-container">
<div>{{item.title}}</div>
<div v-for="item in elementLineData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
<div :id="item.title">{{item.title}}</div>
<img :src="item.pngUrl" width="250">
</div>
</div>
......@@ -21,8 +21,8 @@
<div class="mt-10">
<span class="text-base font-bold">面的案例</span>
<div style="overflow-y: auto" class="container">
<div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`plane${item.title}`)" class="item-container">
<div>{{item.title}}</div>
<div v-for="item in elementPlaneData" :key="item.id" @click="indexBtn(`${item.title}`)" class="item-container">
<div :id="item.title">{{item.title}}</div>
<img :src="item.pngUrl" width="250">
</div>
</div>
......@@ -44,6 +44,7 @@ elementPointData.value = elementPointMap;
elementLineData.value = elementLineMap;
elementPlaneData.value = elementPlaneMap;
// 跳转到对应的编码编辑内容
function indexBtn(id) {
router.push(`/CodeAndCesium/?id=${id}`)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment