vuepress项目侧边栏菜单配置使用

第一种菜单配置,自定义菜单名称

 {
    text: '菜单名称',
    // 是否折叠
    collapsible: true,
    children: [
      {
        text: "自定义md菜单名称",
        sidebarDepth: 2,
        link: "/xxx/aa.md",
        children: [],
      }
    ],
  },

第二种菜单配置

  • 标题自动生成菜单,使用需要搭配sidebarDepth限制展示生成标题级别,这种方式好处是,直接生成,标题索引目录,在侧边栏
  • 菜单名称会根据aa.md中的第一个标题名称生成,菜单也会根据md文件的标题层级自动生成对应级别123级别菜单
  • 标题 # ## ### #### 1234级别标题
  {
    text: '菜单名称',
    // 是否折叠
    collapsible: true,
    sidebarDepth: 2,
    // 缩放子级别名称
    children: [
      '/xxx/aa.md',
      '/xxx/bb.md',
    ],
  },
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于Vue 3的侧边栏封装菜单栏,你可以按照以下步骤进行: 步骤1:创建侧边栏组件 首先,创建一个名为SidebarMenu的Vue组件,在该组件中,可以定义侧边栏的样式、菜单项等。 ```vue <template> <div class="sidebar"> <ul> <li v-for="item in menuItems" :key="item.id" @click="handleItemClick(item)"> {{ item.text }} </li> </ul> </div> </template> <script> export default { data() { return { menuItems: [ { id: 1, text: '菜单项1' }, { id: 2, text: '菜单项2' }, { id: 3, text: '菜单项3' } ] }; }, methods: { handleItemClick(item) { // 处理菜单项的点击事件 console.log(item); } } }; </script> <style scoped> .sidebar { background-color: #f0f0f0; width: 200px; } ul { list-style-type: none; } li { padding: 10px; cursor: pointer; } li:hover { background-color: #ddd; } </style> ``` 步骤2:在主页面中使用侧边栏组件 在你的主页面中,使用SidebarMenu组件,并传入相应的菜单数据。 ```vue <template> <div> <sidebar-menu></sidebar-menu> <div class="content"> <!-- 主要内容区域 --> </div> </div> </template> <script> import SidebarMenu from '@/components/SidebarMenu.vue'; export default { components: { SidebarMenu } }; </script> <style> .content { margin-left: 200px; /* 与侧边栏宽度保持一致 */ } </style> ``` 通过以上步骤,你就可以在Vue 3中封装一个简单的侧边栏菜单栏组件,并在主页面中使用它了。你可以根据需要,自定义样式、菜单项的数据以及处理菜单项点击事件的逻辑。希望以上信息对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值