enn-navigation-bar

NavigationBar

公共基础组件 导航栏组件

npm 地址：https://www.npmjs.com/package/enn-navigation-bar

示例

<template>
  <Nav
    title="LoRaWAN 网络管理平台"
    :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>

API

NavigationBar Attributes

参数	类型	必填	默认值	说明
logo	string		-	logo 图片链接
logoHref	string		-	点击 logo 跳转的链接
title	string		-	页面标题
user	Object	是	-	用户信息
isLogged	Boolean	是	false	是否已登录
bgColor	string		#ffffff	导航栏背景颜色
color	string		#333333	用户信息字体颜色

NavigationBar Events

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

user Attributes

参数	类型	必填	默认值	说明
avatar	string		-	用户头像图片链接
username	string		-	用户名
nickname	string		-	用户昵称（姓名）
email	string		-	邮箱
phone	string		-	手机号

本地测试

npm install

Compiles and hot-reloads for development

npm run dev