{"id":22695738,"url":"https://github.com/acmenlei/vue-markdown-menu-bar","last_synced_at":"2026-05-02T13:32:18.187Z","repository":{"id":59113677,"uuid":"535470504","full_name":"acmenlei/vue-markdown-menu-bar","owner":"acmenlei","description":"A VUE3 + typescript based on the development of web page title navigation parser","archived":false,"fork":false,"pushed_at":"2022-12-01T05:40:07.000Z","size":17,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T03:34:10.214Z","etag":null,"topics":["composition-api","markdown-parser","markdown-plugin","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acmenlei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-12T01:15:12.000Z","updated_at":"2023-07-12T06:59:49.000Z","dependencies_parsed_at":"2023-01-23T12:01:00.564Z","dependency_job_id":null,"html_url":"https://github.com/acmenlei/vue-markdown-menu-bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acmenlei%2Fvue-markdown-menu-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acmenlei%2Fvue-markdown-menu-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acmenlei%2Fvue-markdown-menu-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acmenlei%2Fvue-markdown-menu-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acmenlei","download_url":"https://codeload.github.com/acmenlei/vue-markdown-menu-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246223319,"owners_count":20743165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","markdown-parser","markdown-plugin","typescript","vue","vue3"],"created_at":"2024-12-10T04:11:49.409Z","updated_at":"2026-05-02T13:32:15.903Z","avatar_url":"https://github.com/acmenlei.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003ch3\u003evue-markdown-menu-bar\u003c/h3\u003e\n\t\u003cp align=\"center\"\u003e\n\t    \u003ca href=\"https://vuejs.org/\" target=\"_blank\"\u003e\n\t        \u003cimg src=\"https://img.shields.io/badge/vue.js-vue3.x-green\" alt=\"vue\"\u003e\n\t    \u003c/a\u003e\n\t\t\u003ca href=\"https://www.tslang.cn/\" target=\"_blank\"\u003e\n\t        \u003cimg src=\"https://img.shields.io/badge/typescript-%3E4.0.0-blue\" alt=\"typescript\"\u003e\n\t    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Acmenlei/vue-markdown-menu-bar.git\" target=\"_blank\"\u003e\n\t        \u003cimg src=\"https://img.shields.io/badge/markdown-menu-yellow\" alt=\"markdown-menu\"\u003e\n\t    \u003c/a\u003e\n\t\u003c/p\u003e\n\t\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003c/div\u003e\n\n## 介绍\n基于`Vue3 + ts`的动态生成侧边栏导航组件，开箱即用，需要注意的是，本插件暂不提供`markdown`解析功能(后续可能会添加)，需要您进行解析后将`html`所在的容器传递给我，详情请见`VueMarkdownMenuBar`组件`Props`说明。\n\n## 安装\n```shell\nnpm install vue-markdown-menu-bar\n```\nor\n```shell\nyarn add vue-markdown-menu-bar\n```\nor\n```shell\npnpm install vue-markdown-menu-bar\n```\n\n## 使用：\n1.全局注册(main.ts)\n```ts\nimport VueMarkdownMenuBar from \"vue-markdown-menu-bar\"\ncreateApp(App).use(VueMarkdownMenuBar).mount('#app')\n```\n\n2.vue文件中单独引入(xxx.vue)：\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import { VueMarkdownMenuBar } from \"vue-markdown-menu-bar\"\n\u003c/script\u003e\n```\n3.在模板中使用\n- 我们需要给`VueMarkdownMenuBar`组件传入一个需要解析的容器，它会自动将我们的标题元素解析出来，并自动生成导航栏，开箱即用\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"body\"\u003e\n    \u003ch1\u003e我是h1标题\u003c/h1\u003e\n    \u003cp\u003e1\u003c/p\u003e\n    \u003cp\u003e2\u003c/p\u003e\n    \u003cp\u003e3\u003c/p\u003e\n    \u003cp\u003e4\u003c/p\u003e\n    ...\n    \u003cp\u003e17\u003c/p\u003e\n    \u003cp\u003e18\u003c/p\u003e\n    \u003cp\u003e22\u003c/p\u003e\n    \u003cp\u003e23\u003c/p\u003e\n    \u003cp\u003e24\u003c/p\u003e\n    \u003ch2\u003e我是h2标题\u003c/h2\u003e\n    \u003cp\u003e25\u003c/p\u003e\n    \u003cp\u003e26\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cVueMarkdownMenuBar body=\".body\" width=\"200px\"/\u003e\n\u003c/template\u003e\n```\n## VueMarkdownMenuBar组件Props：\n\n| property name | type             | default value | meaning                                                      |\n| ------------- | ---------------- | ------------- | ------------------------------------------------------------ |\n| body          | String           | 必须传递      | 需要解析的HTML容器，请传递 class 或 id                       |\n| width         | String ｜ Number | 必须传递      | 设置整个VueMarkdownMenuBar容器的宽度，可以为百分比，也可为数值 |\n\n## VueMarkdownMenuBar组件Events：\n\n| event Name    | parmas                                                       | meaning                                     |\n| ------------- | ------------------------------------------------------------ | ------------------------------------------- |\n| @MenuBarClick | 该钩子函数拥有一个对象参数，你可以获取到它们：当前点击的MenuBarItem | 点击导航栏之后你可以获取到点击的MenuBarItem |\n\n## 可选主题色\n- dark\n- lightgreen\n\u003e 只需引入styles文件夹中的样式文件，如下：\n```js\nimport \"vue-markdown-menu-bar/styles/dark.css\";\n```\n## 自定义主题色\n你也可以根据类名来自定主题色，可以去参考对应样式文件中的写法，以下提供几个容器类名供样式修改\n```css\n\u003c!--这是包裹整个menuBar的外层容器 --\u003e\n.o_navigator_menu {\n  background-color: #111!important;\n  color: #ccc!important;\n}\n\u003c!--这是menuBar容器的标题 --\u003e\n.o_menu-bar_title{\n  color: #ccc!important;\n}\n\u003c!--这是menuBar容器的内部导航项的hover效果 --\u003e\n.o_menu-bar_title span:hover {\n  background: #333!important;\n}\n\u003c!--对当前活跃的导航项设置样式 --\u003e\n.o_active {\n  color: deeppink!important;\n}\n\u003c!--对当前活跃的导航项左侧指示器设置样式 --\u003e\n.o_active::after {\n  background-color: deeppink!important;\n}\n```\n## 后续\n\n对该组件有需求的可以给我提PR，也可以一起来维护这个组件，联系方式`wechat：x972761675`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facmenlei%2Fvue-markdown-menu-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facmenlei%2Fvue-markdown-menu-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facmenlei%2Fvue-markdown-menu-bar/lists"}