Custom directory highlighted anchor point calculation displacement

If it can be achieved, remember to give it a star, thank you~

1. Description of the problem

One supports directory tree structure, custom directory highlighting and anchor point calculation displacement, and supports the content corresponding to the anchor point after selecting the directory. Only the component ideas on the left are provided here. To display the corresponding content on the right, it is best to customize the component control yourself for more flexibility and provide ideas.

2. First look at the renderings

3. npm i directory-box or yarn add directory-box to your project

First introduce it in the main.ts file in your own project , such as:

import {
    
     createApp } from "vue";
import DirectoryBox from "directory-box";
import App from "./App.vue";
import "../node_modules/directory-box/directory-box.css";

const app = createApp(App);
app.use(DirectoryBox);
app.mount("#app");

Then directly reference it in your own business components

<div class="main">
  <directory-box :treeData="treeData"></directory-box>
  <div id="contentMain" class="contentMain">
    此处是右边映射的锚点，注意给每一个段落设置一个id,如：
    <div :id="item.id"></div>
  </div>
</div>

PS: This is the anchor point of the mapping on the right. Pay attention to setting an id for each paragraph. This id corresponds to the key value in the directory structure on the left.

PS: The treeData here is the data source. The data result is:

const treeData = [
  {
    
    
    title: "parent 1",
    key: "0-0",
    children: [
      {
    
    
        title: "parent 1-0",
        key: "0-0-0",
        disabled: true,
        children: [
          {
    
     title: "leaf", key: "0-0-0-0", disableCheckbox: true },
          {
    
     title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
    
    
        title: "parent 1-1",
        key: "0-0-1",
        children: [{
    
     key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
];

parameter	illustrate	type	default value	Version
treeData	treeNodes data, if set, there is no need to manually construct the TreeNode node (key is unique within the entire tree)	TreeNode[]	-
paneSize	directory width	number	250	-
title	Directory title name	string	Table of contents	-
height	Directory height	number	300	-

knock off! Thanks for the likes and favorites~