在前端开发中，经常需要实现菜单功能。虽然这不是什么难事，但是如果每次都要手写一遍，会显得很繁琐。此时，npm 包 xceling-menu 就能为我们解决这个问题。在本篇文章中，我们将介绍如何使用这个包。
安装
在使用 xceling-menu 之前，我们需要先安装它。在终端中输入以下命令即可：
npm install xceling-menu
使用方法
引入
我们需要先引入 xceling-menu ：
import { Menu, Item, Divider } from 'xceling-menu';使用
使用 xceling-menu 来创建一个垂直菜单，可以这样写：
<Menu orientation="vertical"> <Item icon="home">Home</Item> <Item icon="inbox">Inbox</Item> <Item icon="star">Star</Item> <Divider /> <Item icon="lock">Lock</Item> <Item icon="logout">Logout</Item> </Menu>
比如上面这一段代码可以创建一个垂直菜单，其中包含了三个 Item 和一个 Divider。每个 Item 带有一个图标和一个文本。Divider 用于分割菜单项。
除了垂直菜单，还可以创建水平菜单：
<Menu orientation="horizontal"> <Item icon="home">Home</Item> <Item icon="inbox">Inbox</Item> <Item icon="star">Star</Item> <Divider /> <Item icon="lock">Lock</Item> <Item icon="logout">Logout</Item> </Menu>
在使用 xceling-menu 创建菜单时，你可以自定义每个菜单项的图标、文本和点击事件。
示例代码
下面是一个完整的例子，包含有每个 xceling-menu 组件的用法。
-- -------------------- ---- -------
------ - ----- ----- ------- - ---- ---------------
-------- ------------- -
------------ ---------
-
-------- ----- -
------ -
----- -----------------------
----- ----------- ---------------------------------
----- ------------ ----------------------------------
----- ----------- ---------------------------------
-------- --
----- ----------- ---------------------------------
----- ------------- -----------------------------------
-------
--
-
------ ------- ----总结
使用 xceling-menu 可以快速地创建菜单，特别是当需要多个菜单时。在使用时，可以自定义每个菜单项的图标、文本和点击事件，使其更符合自己的需求。希望这篇文章可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e3989