简介
vertical-navigator-vue2.0 是一个基于 Vue.js 的垂直导航栏组件。它提供了简单易用的 API 和丰富的样式选项，为开发者节省了大量时间。本文将介绍如何使用该 npm 包及其 API。
安装
该组件是一个 Vue.js 插件，可通过 npm 安装：
npm install vertical-navigator-vue2.0 --save
使用
在 Vue 中使用该组件非常简单。首先，需要将其添加到 Vue 的实例中：
import VerticalNavigator from 'vertical-navigator-vue2.0';
export default {
components: {
VerticalNavigator,
},
};现在，就可以在模板中使用该组件：
-- -------------------- ---- -------
----------
------------------ -------------- --
-----------
--------
------ ----------------- ---- ----------------------------
------ ------- -
----------- -
------------------
--
------ -
------ -
------ -
- ------ ------- ----- ------- ----- --- --
- ------ -------- ----- ------- ----- -------- --
- ------ ---------- ----- ------- ----- ---------- --
--
--
--
--
---------该组件需要一个 items 属性，该属性是一个数组，包含每个导航条目的标签、图标和路径。
API
该组件提供了几个可选属性，可用于自定义样式和行为。
1. active-class
该属性指定被选中的导航项的类名。默认值为 'active'。
<VerticalNavigator :items="items" active-class="my-active-class" />
2. icon-class
该属性指定导航项图标的类名。默认值为 'material-icons'.
<VerticalNavigator :items="items" icon-class="fa fa-lg" />
3. orientation
该属性指定导航项的方向。默认值为 'left'。 可选值为 'left' 或 'right'。
<VerticalNavigator :items="items" orientation="left" />
4. item-class
该属性指定每个导航项的类名。
<VerticalNavigator :items="items" item-class="my-item-class" />
5. wrapper-class
该属性指定导航选项容器的类名。
<VerticalNavigator :items="items" wrapper-class="my-wrapper-class" />
示例代码
-- -------------------- ---- -------
----------
------------------ -------------- ------------------- ------------------------------ --
-----------
--------
------ ----------------- ---- ----------------------------
------ ------- -
----------- -
------------------
--
------ -
------ -
------ -
- ------ ------- ----- ------- ----- --- --
- ------ -------- ----- ------- ----- -------- --
- ------ ---------- ----- ------- ----- ---------- --
- ------ ------- ----- ------- ----- ------- --
--
--
--
--
---------
------ -------
---------------- -
----------------- --------
------ -----
-
----------------- -
------ ------
----------------- -----
------- --- ----- -----
-
-------------- -
------ -----
-
--------该示例代码中，我们以右对齐的方式使用该垂直导航栏组件，样式定制化，虽然示例样式简单，但是你完全可以根据自己的需要自定义样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005637d81e8991b448e1107