|
|
@@ -1,50 +1,51 @@
|
|
|
<script setup lang="ts">
|
|
|
-import type { TreeProps } from "ant-design-vue";
|
|
|
-import { ref } from "vue";
|
|
|
+import { ref, type Ref, type PropType } from "vue";
|
|
|
+import type { CatalogNode } from "@/types/doc.types";
|
|
|
|
|
|
-const expandedKeys = ref<string[]>([]);
|
|
|
-const selectedKeys = ref<string[]>([]);
|
|
|
-const treeData = ref<TreeProps['treeData']>([
|
|
|
- {
|
|
|
- title: 'parent 0',
|
|
|
- key: '0-0',
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: 'leaf 0-0',
|
|
|
- key: '0-0-0',
|
|
|
- isLeaf: true,
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'leaf 0-1',
|
|
|
- key: '0-0-1',
|
|
|
- isLeaf: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'parent 1',
|
|
|
- key: '0-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: 'leaf 1-0',
|
|
|
- key: '0-1-0',
|
|
|
- isLeaf: true,
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'leaf 1-1',
|
|
|
- key: '0-1-1',
|
|
|
- isLeaf: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-]);
|
|
|
+const props = defineProps({
|
|
|
+ catalog: {
|
|
|
+ type: Object as PropType<CatalogNode[]>,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const activeKey: Ref<string[]> = ref([]);
|
|
|
+
|
|
|
+function onChapterClick(e: MouseEvent, index: number, subIndex?: number) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const catalogNode = props.catalog[index];
|
|
|
+ if (subIndex === undefined) {
|
|
|
+ console.log('点击了第一级章节标题', catalogNode.title);
|
|
|
+ } else {
|
|
|
+ const subCatalogNode = catalogNode.children![subIndex];
|
|
|
+ console.log('点击了第二级标题', subCatalogNode.title);
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <a-directory-tree
|
|
|
- v-model:expandedKeys="expandedKeys"
|
|
|
- v-model:selectedKeys="selectedKeys"
|
|
|
- :tree-data="treeData"
|
|
|
- :show-icon="false"
|
|
|
- ></a-directory-tree>
|
|
|
+ <a-collapse v-model:activeKey="activeKey">
|
|
|
+ <a-collapse-panel
|
|
|
+ v-for="(item, index) in catalog"
|
|
|
+ :header="item.title"
|
|
|
+ :key="index"
|
|
|
+ @click="onChapterClick($event, index)"
|
|
|
+ >
|
|
|
+ <div v-for="(subItem, subIndex) in item.children" :key="index+'-'+subIndex" class="sub-catalog">
|
|
|
+ <a href="javascript:void(0)" @click="onChapterClick($event, index, subIndex)">{{ subItem.title }}</a>
|
|
|
+ </div>
|
|
|
+ </a-collapse-panel>
|
|
|
+ </a-collapse>
|
|
|
</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.sub-catalog {
|
|
|
+ margin-top: 6px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|