vue.js 我想创建一个带有锚标记的菜单

z31licg0  于 2023-02-13  发布在  Vue.js
关注(0)|答案(2)|浏览(158)

正如我在标题中所说,我想创建一个带有锚标签的菜单,但我一直在Youtube和其他网站上寻找类似的东西,我还没有找到。
在我的想法,我想做的,是一个类似于vue.js文档或vuetify右侧菜单的子菜单,下面我将向您展示它的图片.(我也在使用vuetify)
我想要的示例-〉(https://i.stack.imgur.com/IAiAZ.png
我不知道该怎么称呼这个,也不知道在哪里可以找到一个例子(主要是因为我在这个新世界的经验有限),所以如果有人能帮助我,我真的很感激:)
我试着看了一些仓库和Youtube上的视频,我想这应该叫做菜单或者子菜单,但是我想不出来...
提前向您致以最诚挚的问候和感谢

s5a0g9ez

s5a0g9ez1#

vuetify里面有一个组件可以做你想做的事情,它的名字是v-navigation-drawer
下面是演示代码:

<v-navigation-drawer
v-model="drawer"
app
>
<v-list dense>
  <v-list-item v-for="item in items" :key="item.title">
    <v-list-item-content>
      <v-list-item-title>
        {{ item.title }}
      </v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

和此处的选项:

export default {
data () {
return {
  drawer: false,
  items: [
    { title: 'Home' },
    { title: 'About' },
    { title: 'Contact' }
  ]
}
}
}

希望这个能帮上忙。

oprakyz7

oprakyz72#

它被称为大纲或目录。
vuetifyjs.com : https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/Toc.vue#L11
vuejs.org: https://github.com/vuejs/theme/blob/main/src/vitepress/components/VPContentDocOutline.vue

相关问题