vue-markdown-menu-bar

vue-markdown-menu-bar

 

介绍

基于Vue3 + ts的动态生成侧边栏导航组件，开箱即用，需要注意的是，本插件暂不提供markdown解析功能(后续可能会添加)，需要您进行解析后将html所在的容器传递给我，详情请见VueMarkdownMenuBar组件Props说明。

安装

npm install vue-markdown-menu-bar

or

yarn add vue-markdown-menu-bar

or

pnpm install vue-markdown-menu-bar

使用：

1.全局注册(main.ts)

import VueMarkdownMenuBar from "vue-markdown-menu-bar"
createApp(App).use(VueMarkdownMenuBar).mount('#app')

2.vue文件中单独引入(xxx.vue)：

<script setup lang="ts">
  import { VueMarkdownMenuBar } from "vue-markdown-menu-bar"
</script>

3.在模板中使用

• 我们需要给VueMarkdownMenuBar组件传入一个需要解析的容器，它会自动将我们的标题元素解析出来，并自动生成导航栏，开箱即用

<template>
  <div class="body">
    <h1>我是h1标题</h1>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    ...
    <p>17</p>
    <p>18</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <h2>我是h2标题</h2>
    <p>25</p>
    <p>26</p>
  </div>
  <VueMarkdownMenuBar body=".body" width="200px"/>
</template>

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文件夹中的样式文件，如下：

import "vue-markdown-menu-bar/styles/dark.css";

自定义主题色

你也可以根据类名来自定主题色，可以去参考对应样式文件中的写法，以下提供几个容器类名供样式修改

<!--这是包裹整个menuBar的外层容器 -->
.o_navigator_menu {
  background-color: #111!important;
  color: #ccc!important;
}
<!--这是menuBar容器的标题 -->
.o_menu-bar_title{
  color: #ccc!important;
}
<!--这是menuBar容器的内部导航项的hover效果 -->
.o_menu-bar_title span:hover {
  background: #333!important;
}
<!--对当前活跃的导航项设置样式 -->
.o_active {
  color: deeppink!important;
}
<!--对当前活跃的导航项左侧指示器设置样式 -->
.o_active::after {
  background-color: deeppink!important;
}

后续

对该组件有需求的可以给我提PR，也可以一起来维护这个组件，联系方式wechat：x972761675