npm 包 menu-builder 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 menu-builder

menu-builder 是一个适用于前端的 npm 包，它可以帮助你快速创建一个可配置的菜单。

安装

使用 npm 安装：

npm install menu-builder

使用方法

基础用法

menu-builder 可以通过调用 createMenu 方法创建一个菜单。

-- -------------------- ---- -------
------ - ---------- - ---- ---------------

----- ---- - ------------
  --- --------
  ----- -
    -
      ------ -----
      ----- -------
      ---- ----
      ------- ----
    --
    -
      ------ -----
      ----- ----------
      ---- -----------
    --
    -
      ------ -----
      ----- --------
      ---- --------
    -
  -
---

data 参数是一个数组，表示菜单的每一项，其中每个项都有以下属性：

title: 菜单项标题
icon: 菜单项图标
url: 菜单项链接地址
active: 是否为当前激活菜单项

当 active 属性被设置为 true 时，菜单项会自动添加 active 类名。

el 是放置菜单的 DOM 元素的选择器。

高级用法

menu-builder 还支持更多的配置项：

-- -------------------- ---- -------
------ - ---------- - ---- ---------------

----- ---- - ------------
  --- --------
  ----- -
    -
      ------ -----
      ----- -------
      ---- ----
      ------- ----
    --
    -
      ------ -----
      ----- ----------
      ---- -----------
    --
    -
      ------ -----
      ----- --------
      ---- --------
    -
  --
  ---------- ------------
  ------------ ------- ----- -- -
    ---------------- -------- ----- ------
  -
---

className: 菜单的 CSS 类名，默认值为 menu-builder
handleClick: 菜单项的点击事件处理函数，可以获取到被点击的菜单项的索引值和菜单项对象

结语

通过本文的介绍，你已经了解到了 menu-builder 的基础用法和高级用法，相信你已经可以在项目中自如地使用它了。同时，menu-builder 还有更多特性，希望你可以在使用过程中自行探索。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bb0