npm 包 upcn-header-lib 使用教程

简介

upcn-header-lib 是基于 Vue.js 的一个组件库，主要用于创建适用于 UPcN 系统头部导航的 UI 组件。此库提供了诸如导航菜单、通知中心、用户信息等功能，使得程序员们能够快速而简单地创建出现代化的用户界面。

安装

upcn-header-lib 可以通过 npm 包管理器进行安装：

$ npm install upcn-header-lib --save

使用

样式

upcn-header-lib 使用了 SASS 编写样式。为了让您的组件样式更加平滑，我们推荐您使用 SASS 或者 CSS 预处理器。

在你的应用程序中，通过向样式表添加以下两个文件中的任何一个来引入 upcn-header-lib 的样式：

/* 引入所有默认样式 */
@import "~upcn-header-lib/dist/upcn-header-lib.min.css";

/* 或者只引入图标 */
@import "~upcn-header-lib/dist/upcn-header-lib-icons.min.css"; 

引入

在你的代码中，通过以下方式引入 upcn-header-lib：

import UpcnHeader from 'upcn-header-lib'

然后，添加组件：

// 单个组件
Vue.component('upcn-header', UpcnHeader);

// 全局组件（会导致每个页面都自动引入 upcn-header）
Vue.use(UpcnHeader);

通用布局

在你的 HTML 模板中添加组件：

<upcn-header>
  <!-- 这里放置你的自定义内容 -->
</upcn-header>

在你的 JavaScript 中，设置默认设置：

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

更多的配置选项可以查看 api 页面。

用户信息

你可以通过以下方法来渲染用户信息：

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

注意：user-info 需要在父组件的作用域内设置 name。

通知中心

你可以通过以下方式来渲染通知中心：

<upcn-header>
  <template slot="notifications">
    <!-- ... 对于每个通知元素，你可以使用一个 v-for 循环来渲染 ... -->
  </template>
</upcn-header>

更多组件

upcn-header-lib 还提供了其他几个方便的组件：

SearchBar

<upcn-header>
  <template slot="search-bar">
    <input type="text" placeholder="输入内容" />
  </template>
</upcn-header>

SideMenu

<upcn-header>
  <template slot="side-menu">
    <ul>
      <li>菜单项 1</li>
      <li>菜单项 2</li>
    </ul>
  </template>
</upcn-header>

API

upcn-header

upcn-header.setNavItems

设置导航菜单项。

this.$upcnHeader.setNavItems([{
  label: '导航项1',
  url: '/items/1',
  icon: 'icon-home' // 如果需要图标，可以加上
}, {
  label: '导航项2',
  url: '/items/2'
}]);

upcn-header.setBrand

设置标志品牌。

this.$upcnHeader.setBrand(name, url);

upcn-header.setUserInfo

设置用户信息。

this.$upcnHeader.setUserInfo({
  name: '用户名称',
  avatar: 'https://...',
  size: 30 // 头像大小（像素）
});

upcn-header.setNotifications

设置通知中心。

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

SideMenu

SideMenu.show

在右侧展示侧栏。

this.$refs.sideMenu.show();

SideMenu.hide

隐藏侧边栏。

this.$refs.sideMenu.hide();

示例代码

具有全部成分的示例

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

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

只有基础组件的示例

<upcn-header>
  <template slot="brand">upcn-header-lib</template>
  <template slot="nav-items">
    <li>导航项 1</li>
    <li>导航项 2</li>
    <li>导航项 3</li>
  </template>
</upcn-header>

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

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