导航栏菜单 vue 树形_Vue.js树导航菜单

最新推荐文章于 2025-03-29 17:54:52 发布

cuk5239

最新推荐文章于 2025-03-29 17:54:52 发布

阅读量1.2k

点赞数

文章标签： vue java js web javascript ViewUI

原文链接：https://vuejsexamples.com/a-vue-js-tree-navigation-menu/

版权

这是一个Vue.js实现的无限层级导航树形菜单组件，特点包括可自定义默认展开层级，只包含必要样式，方便自定义。文章介绍了安装、使用方法以及在Nuxt.js项目中的应用，并提供了开发者指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏菜单 vue 树形

导航树导航 (vue-tree-navigation)

A Vue.js tree navigation menu with unlimited number of levels and minimum styles included

Vue.js树导航菜单，其中包含无限数量的级别和最小样式

View demo 查看演示 Download Source 下载源

特征： (Features:)

unlimited number of levels
无限数量的级别
you can define default open level
您可以定义默认打开级别
focused on core functionality, only necessary styles included - just apply your own styles like I did for demo page :wink:
专注于核心功能，仅包含必要的样式-像我在演示页面上一样应用自己的样式：wink：

安装 (Installation)

$ npm install vue-tree-navigation

main.js

import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

用法 (Usage)

file.vue

<vue-tree-navigation :items="items" :defaultOpenLevel="defaultOpenLevel" />

export default {
  ...
  data() {
    return {
      items: [
        { name: 'First category', children: [
          { name: 'Category item', href: '#take-me-somewhere' },
          { name: 'Category item', href: '#take-me-somewhere' }
        ]},
        { name: 'Second category', href: '#take-me-somewhere' }
      ],
      defaultOpenLevel: 1
    }
  },
  ...
};

items Array

项目 Array

An array containing navigation menu items.

包含导航菜单项的数组。

You don't need to specify href field. Menu item will be rendered as a simple value instead of a hyperlink in this case.

您无需指定href字段。在这种情况下，菜单项将呈现为简单值而不是超链接。

defaultOpenLevel Number

Optional. Default value is 0 (everything is closed).

可选的。默认值为0(所有内容均已关闭)。

纳克斯特 (Nuxt)

You can use the component in your Nuxt.js project if you disable server-side rendering for your Nuxt plugin:

如果您禁用Nuxt插件的服务器端呈现，则可以在Nuxt.js项目中使用该组件：

plugins/vue-tree-navigation.js

插件/vue-tree-navigation.js

import Vue from 'vue';
import VueTreeNavigation from 'vue-tree-navigation';

Vue.use(VueTreeNavigation);

nuxt.config.js

module.exports = {
  ...
  plugins: [
    { src: '~plugins/vue-tree-navigation', ssr: false }
  ],
  ...
}

开发者 (Developers)

Install dependencies:

安装依赖项：

$ npm install

Run tests:

运行测试：

$ npm run test

Run tests in verbose mode:

以详细模式运行测试：

$ npm run test:verbose

Run development server:

运行开发服务器：

$ npm run dev

Build:

建立：

$ npm run build

Run demo development server:

运行演示开发服务器：

$ cd demo
$ npm install
$ npm run dev

翻译自: https://vuejsexamples.com/a-vue-js-tree-navigation-menu/

导航栏菜单 vue 树形