enn-navigation-bar-vue3

导航栏组件 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: '[e-mail]',
        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>