vue3outline v0.1.3

vue3outline

介绍

• 本项目缘起于vue-outline，目的是为页面增加内部目录导航。原项目已经停更 2 年了，基于 vue2。
• 预览页面

依赖

"vue": "^3.2.25"

安装

pnpm install vue3outline

导入

import { useOutline } from 'vue3outline';

使用

可以参考 src/views/HelloWorld.vue

  <div class="example">
    <div class="nav">
      <div class="navcontent">
        <h1> 目录 </h1>
        <outline-tree :tree-data="navTree">
          <template #default="{ scope }">
            <span class="content_node" @click.stop="jumpToAnchor(scope.row.el)"> {{ scope.row.title }} </span>
          </template>
        </outline-tree>
      </div>
    </div>
    <div v-outline="tocProps" class="content"> <Contents /> </div>
  </div>

  import { ref } from 'vue';
  import TestArticle from './test/TestArticle.vue';

  const tocProps = { callback: refreshNavTree, selectors: ['h2', 'h3', 'h4'], exceptSelector: '[un-nav]' };

  const navTree = ref([]);
  function refreshNavTree(treeData) {
    navTree.value = treeData;
  }
  function jumpToAnchor(el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
  }