简介
riot-nav 是一款基于 Riot.js 的前端组件，旨在提供简单快捷的导航栏组件。通过此组件，我们可以更加简单地实现导航条的构建及相关操作。
安装
npm 包的安装相对简单，只需使用 npm 命令即可：
npm install riot-nav
如果你正在使用 yarn 作为包管理器，则可以使用以下命令：
yarn add riot-nav
基本使用
首先，我们需要引入 riot-nav 组件：
import 'riot-nav'
然后，在 Riot.js 中，我们需要通过 <riot-nav> 标签来使用这个组件：
<riot-nav links="['/home', '/about', '/contact']" />
这里我们通过 links 属性向组件传入了导航链接数组。注意 links 属性值需要是一个数组，数组中包含的为字符串类型的链接地址。
属性
riot-nav 组件支持多种属性配置，这里我们来一一介绍。
align
导航条对齐方式，可选 left/right/center，默认为 left。
<riot-nav align="right" />
links
导航链接数组，数组中含有多个字符串类型的链接地址。
<riot-nav links="['/home', '/about', '/contact']"/>
active-class
当前活跃（被选中）链接的 class 名称，默认为 active。
<riot-nav active-class="current-link"/>
target
链接链接跳转的方式，默认值为 _self，即打开当前链接所在的页面，也可设为 _blank，表示在新页面中打开链接。
<riot-nav target="_blank"/>
mode
导航的模式，可选值为 vertical 或 horizontal，分别表示垂直和水平导航条。默认为 horizontal。
<riot-nav mode="vertical"/>
模板
riot-nav 组件的默认模板如下：
<nav>
<ul>
<li each="{link in opts.links}" class="{active-class: link === opts.selected}" riot-style="{mode === 'horizontal' ? 'display: inline-block': ''}">
<a href="{link}" target="{opts.target}" onclick="{navigate}">{link}</a>
</li>
</ul>
</nav>我们也可以通过通过指定模板的方式自定义导航条，只需在导航条组件中定义 <template> 标签即可，riot.js 会在组件编译时自动引入该模板：
-- -------------------- ---- -------
--------- ---------------- --------- -------------
----------
---- ------------ --- ------------ - ---------------- - -----------------
----
--- ----------- -- ------------ --------------------- ---- --- --------------- ----------------- --- ------------ - --------- -------------- -----
-- ------------- ---------------------- -------------------------------
-----
-----
------
-----------
-----------通过指定模板，我们可以自由地进行样式和布局的调整。
方法
riot-nav 也提供了一些方法来方便我们使用组件。
select
通过 select 方法，可以选中某个链接：
const nav = riot.mount('riot-nav')[0]
nav.select('/about')update
通过 update 方法，可以更新导航链接数组：
const nav = riot.mount('riot-nav')[0]
nav.update(['/', '/home', '/about'])getSelected
通过 getSelected 方法，可以获取当前选中的链接：
const nav = riot.mount('riot-nav')[0]
nav.getSelected()示例代码
最后，下面是一个完整的示例代码，包含了我们介绍过的基本使用方法以及示例中的自定义导航栏样式。
-- -------------------- ---- -------
--------- ------------ -------- ---------- --------------- ----------------------------
----------
---- ------------ --- ------------ - ---------------- - -----------------
----
--- ----------- -- ------------ --------------------- ---- --- --------------- ----------------- --- ------------ - --------- -------------- -----
-- ------------- ---------------------- -------------------------------
-----
-----
------
-----------
-----------
--------
------ ----------
-----------------------------------------
---------
-------
------------- -- -
-------- -----
--------------- -------
---------------- -----
------- --
-------- --
-
------------- -- -
------- --
-
--------------- -- -
-------- -----
---------------- -----
------- --
-------- --
---------------- --------------
------------ -------
-
--------------- -- -
------- - -----
-
------------- -
------------ -----
-
--------结语
riot-nav 是一款简单又实用的前端组件，为网站的导航栏提供了方便快捷的构建方式。希望通过本文的介绍，大家能够学会使用并能够灵活应用 riot-nav 来提升自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4ae