在Web前端开发中，尤其是在企业级应用中，设置页面的标题、导航栏等公用的组件是很重要的。针对这个需求，贝岭集团开发了一个NPM包 @beisen-cmps/isv-common-head，它提供了页面标题、面包屑导航、一些样式和公用函数。使用这个NPM包可以帮助前端开发者快速开发符合企业应用风格的页面。本文将介绍@beisen-cmps/isv-common-head的使用方法。
前置技能
- 熟悉NodeJS及npm包管理
- 熟悉Vue.js基础开发
- 熟练使用JavaScript、CSS、HTML等Web前端开发技术
安装
在项目中运行如下命令进行安装：
npm install @beisen-cmps/isv-common-head --save
使用
在Vue组件中引入组件和相关样式和方法即可，如下所示：
-- -------------------- ---- -------
----------
---- ------------------
-------------------
------------
--------------
--------------------
----------
----------------------
--
---------------
------
-----------
--------
------ ---------------- ---- ------------------------------
------ ----------------------------------------
------ ------------ ---- -------------------------------------
------ ------- -
----- ----------------------
----------- -
----------------
--
---- -- -
------ -
----- -
-
------ -----
----- ---
--
-
------ -----
----- ------------
--
-
------ ------------------
----- ----------------------------
-
--
------ ----------------------
--------- -----
---- ---------- --------
-
--
-------- -
--------- -- -
-------------------
-
--
------- -- -
----------------------- -------- -- -----
-
-
---------参数说明
navs
- 类型: Array
- 默认值: []
页面导航栏数组，每个元素都是一个对象，包含title和path属性：
[
{title: '主页', path: '/'},
{title: '组件', path: '/component'},
{title: 'isv-common-head', path: '/component/isv-common-head'}
]title
- 类型: String
- 默认值: ''
页面标题文字。
hideBack
- 类型: Boolean
- 默认值: false
隐藏返回按钮。
kit
- 类型: Array
- 默认值: []
需要引入的UI组件库名称，目前只支持button和input两个组件。
backClick
- 类型: Function
点击页面头部的返回按钮时触发的事件。
示例代码
下面是一个完整的代码示例：
-- -------------------- ---- -------
----------
---- ------------------
-------------------
------------
--------------
--------------------
----------
----------------------
--
---- ----------------
-----------------------------------
-----------------------------
-------------- -------------------------------
--- -------------------------------------------------------
---------------------------------------------------
---------------------------------------
------- ---------- --------
------
------
-----------
--------
------ ---------------- ---- ------------------------------
------ ------------ ---- -------------------------------------
------ -------------- ---- -----------------------
------ ----------- ---- ---------------------------------
------ ------------ ---- ----------------------------------
------ ----------------------------------------
------ --------------------------------------------
------ ------- -
----- ------
----------- -
-----------------
---------------
------------
------------
--
---- -- -
------ -
----- -
-
------ -----
----- ---
--
-
------ -----
----- ------------
--
-
------ ------------------
----- ----------------------------
-
--
------ ----------------------
--------- -----
---- ---------- ---------
----------- --
-
--
-------- -
----- -- -
--------------------
--
--------- -- -
-------------------
-
--
------- -- -
-- -----
----------------------- ----- ----- -----
----------------------- ----- ----- --------------
--------------- - ----------------
-
-
---------
-------
---------- -
------ ------
------- - -----
-
-------- -
-------- -----
-
------ -
----------- -----
---------- -----
------------ -----
-
--------结语
通过这篇文章，我们了解到了NPM包@beisen-cmps/isv-common-head的使用方法，它提供了页面标题、面包屑导航、样式和公用函数等组件，旨在帮助前端开发者更快速地开发符合企业应用风格的页面。在实际开发中，我们可以根据自己的需求和业务特点，发挥@beisen-cmps/isv-common-head的特长，提升开发效率和页面质量。
如果你还有疑问或需要进一步了解该NPM包，可以访问贝岭集团官方网站或@beisen-cmps/isv-common-head的GitHub仓库查看文档和源码。
感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136499