背景

实现vditor默认展示大纲。

实现逻辑

实现逻辑如下：

    vditor.value = new Vditor('vditor', {
      mode: 'ir',
      toolbarConfig: {
        hide: true // 隐藏工具栏
      },
    outline: {
        enable: true // 开启大纲功能
    },
      cache: {
        enable: false,
      },
      preview: {
        markdown: {
          toc: true,
        }
      },
      after: () => {
        this.fetchData(this.$route.params.id);
      },
    });

在 Vditor 中，要打开大纲（outline），你需要在初始化编辑器时配置 outline 选项。以下是如何在 Vditor 中开启大纲的步骤：

  1. 初始化 Vditor 时配置 outline： 在创建 Vditor 实例的时候，你需要在配置选项中设置 outline 为 true，这样就会在编辑器的侧边栏显示大纲。
import Vditor from 'vditor'
import 'vditor/dist/index.css'

// 创建 Vditor 实例并开启大纲
const vditor = new Vditor('vditor', {
  outline: {
    enable: true // 开启大纲功能
  },
  // 其他配置...
})
  1. 通过工具栏按钮打开大纲： 如果你希望在工具栏中添加一个按钮来控制大纲的显示，你可以在 toolbar 配置中添加 outline 按钮。
const vditor = new Vditor('vditor', {
  toolbar: [
    'emoji',
    'headings',
    'bold',
    'italic',
    'strike',
    'link',
    '|',
    'outline', // 添加大纲按钮
    // 其他工具栏按钮...
  ],
  // 其他配置...
})
  1. 通过 API 控制大纲： Vditor 提供了 API 来控制大纲的显示和隐藏。你可以在需要的时候调用这些 API。
// 显示大纲
vditorOutline.show()

// 隐藏大纲
vditorOutline.hide()

请注意，上述代码中的 vditorOutline 是 Vditor 实例的 outline 属性，你可以通过它来控制大纲的显示状态。

  1. CSS 控制大纲的显示： 你还可以通过 CSS 来控制大纲的显示和隐藏，例如：
/* 默认隐藏大纲 */
.vditor-outline {
  display: none;
}

/* 当屏幕宽度大于等于992px时显示大纲 */
@media screen and (min-width: 992px) {
  .vditor-outline {
    display: block;
  }
}

请根据你的具体需求和项目设置来调整上述代码。如果你需要更详细的帮助或者有特定的配置问题，可以查看 Vditor 的官方文档或者在项目的 GitHub 仓库中搜索相关的解决方案。