https://github.com/acmenlei/vue-markdown-menu-bar
A VUE3 + typescript based on the development of web page title navigation parser
https://github.com/acmenlei/vue-markdown-menu-bar
composition-api markdown-parser markdown-plugin typescript vue vue3
Last synced: about 2 months ago
JSON representation
A VUE3 + typescript based on the development of web page title navigation parser
- Host: GitHub
- URL: https://github.com/acmenlei/vue-markdown-menu-bar
- Owner: acmenlei
- Created: 2022-09-12T01:15:12.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-01T05:40:07.000Z (over 3 years ago)
- Last Synced: 2025-03-23T03:34:10.214Z (about 1 year ago)
- Topics: composition-api, markdown-parser, markdown-plugin, typescript, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vue-markdown-menu-bar
## 介绍
基于`Vue3 + ts`的动态生成侧边栏导航组件，开箱即用，需要注意的是，本插件暂不提供`markdown`解析功能(后续可能会添加)，需要您进行解析后将`html`所在的容器传递给我，详情请见`VueMarkdownMenuBar`组件`Props`说明。
## 安装
```shell
npm install vue-markdown-menu-bar
```
or
```shell
yarn add vue-markdown-menu-bar
```
or
```shell
pnpm install vue-markdown-menu-bar
```
## 使用：
1.全局注册(main.ts)
```ts
import VueMarkdownMenuBar from "vue-markdown-menu-bar"
createApp(App).use(VueMarkdownMenuBar).mount('#app')
```
2.vue文件中单独引入(xxx.vue)：
```html
import { VueMarkdownMenuBar } from "vue-markdown-menu-bar"
```
3.在模板中使用
- 我们需要给`VueMarkdownMenuBar`组件传入一个需要解析的容器，它会自动将我们的标题元素解析出来，并自动生成导航栏，开箱即用
```html
我是h1标题
1
2
3
4
...
17
18
22
23
24
我是h2标题
25
26
```
## VueMarkdownMenuBar组件Props：
| property name | type | default value | meaning |
| ------------- | ---------------- | ------------- | ------------------------------------------------------------ |
| body | String | 必须传递 | 需要解析的HTML容器，请传递 class 或 id |
| width | String ｜ Number | 必须传递 | 设置整个VueMarkdownMenuBar容器的宽度，可以为百分比，也可为数值 |
## VueMarkdownMenuBar组件Events：
| event Name | parmas | meaning |
| ------------- | ------------------------------------------------------------ | ------------------------------------------- |
| @MenuBarClick | 该钩子函数拥有一个对象参数，你可以获取到它们：当前点击的MenuBarItem | 点击导航栏之后你可以获取到点击的MenuBarItem |
## 可选主题色
- dark
- lightgreen
> 只需引入styles文件夹中的样式文件，如下：
```js
import "vue-markdown-menu-bar/styles/dark.css";
```
## 自定义主题色
你也可以根据类名来自定主题色，可以去参考对应样式文件中的写法，以下提供几个容器类名供样式修改
```css
.o_navigator_menu {
background-color: #111!important;
color: #ccc!important;
}
.o_menu-bar_title{
color: #ccc!important;
}
.o_menu-bar_title span:hover {
background: #333!important;
}
.o_active {
color: deeppink!important;
}
.o_active::after {
background-color: deeppink!important;
}
```
## 后续
对该组件有需求的可以给我提PR，也可以一起来维护这个组件，联系方式`wechat：x972761675`