导航栏组件 for Vue3

调试

• npm run dev

发包

• lib 为发包后的文件夹

示例

navigation-bar 单独使用

<template>
  <Nav
    title="XXX 网络管理平台"
    :user="user"
    :isLogged="isLogged"
    @onLogin="onLogin"
    @onLogout="onLogout"
  />
</template>

<script>
import Nav from 'enn-navigation-bar';
export default {
  components: {
    Nav,
  },
  data() {
    return {
      user: {},
      isLogged: false,
    };
  },
  methods: {
    onLogin() {
      this.user = {
        username: 'username',
        nickname: 'nickname',
        email: '[email protected]',
        phone: '13512345678',
      };
      this.isLogged = true;
      console.log('onLogin');
    },
    onLogout() {
      this.user = {};
      this.isLogged = false;
      console.log('onLogout');
    },
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>

Tips

• 如果外面包裹了 el-header 需要手动重置 el-header 的样式。

<el-header style="height: 52px; padding: 0">
  <Nav :user="user" :isLogged="isLogged" @onLogin="onLogin" @onLogout="onLogout" />
</el-header>

API

NavigationBar Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------- | ---- | ------ | ------------------------------ | | logo | string | | - | logo 图片链接 | | logoHref | string | | - | 点击 logo 跳转的链接 | | title | string | | - | 页面标题 | | user | Object | 是 | - | 用户信息 | | isLogged | Boolean | 是 | false | 是否已登录 | | options | Array | | - | hover 显示的用户信息及相关操作 |

NavigationBar Events

| 事件名称 | 说明 | 回调参数 | | -------- | ---------------- | -------- | | onLogin | 登录按钮触发事件 | - | | onLogout | 登出按钮触发事件 | - |

user Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------ | ---- | ------ | ---------------- | | avatar | string | | - | 用户头像图片链接 | | username | string | | - | 用户名 |

options Attributes

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------- | -------- | ---- | ------ | ------------------------------------------------------------------------------------------------------- | | label | string | | - | 显示的文案 | | name | string | | - | 使用 router 进行跳转的 name | | href | string | | - | 如果为 https:// 或 http:// 或 // 开头，使用 window.open 打开该链接。否则使用 history.pushState 进行跳转 | | query | Object | | - | 链接参数 | | handler | Function | | - | 手动处理点击事件的回调函数，参数为该项的值 |

插槽 Slots

| 插槽名称 | 绑定值 | 作用 | | ---------- | ------ | ------------------ | | centerSlot | | 中间空白部分的插槽 |

<Nav title="XXX 网络管理平台" @onLogin="onLogin" @onLogout="onLogout">
  <template #centerSlot>centerSlot</template>
</Nav>