Vue-cli实战项目9 顶部导航栏的实现

上一章节

Vue-cli实战项目8 主布局的实现

顶部导航栏的实现

使用Element 的 NavMenu 导航菜单组件来实现
NavMenu 导航菜单

基本实现

<el-header class="d-flex align-items-center" style="background: #545c64;">
  
  <a class="h5 text-light mb-0 mr-auto">UNI-ADMINa>
  
  <el-menu
    :default-active="navBarIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">首页el-menu-item>
	<el-menu-item index="1">商品el-menu-item>
	<el-menu-item index="1">订单el-menu-item>
	<el-menu-item index="1">会员el-menu-item>
	<el-menu-item index="1">设置el-menu-item>
    <el-submenu index="100">
		<template slot="title">
			
			<el-avatar :size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">el-avatar>
			silas
		template>
		<el-menu-item index="100-1">修改el-menu-item>
		<el-menu-item index="100-2">退出el-menu-item>
    el-submenu>
  el-menu>
el-header>

script

export default {
    data() {
      return {
        navBarIndex: '1'
      };
    },
    methods: {
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }

调整

水平布局 class=“d-flex”
居中 class=“align-items-center”

mb-0 = margin-bottom：0
mr-auto = margin-right: auto

头像

<el-avatar shape="square" :size="size" :src="squareUrl">el-avatar>

完整代码

<template>
	<div>
		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;overflow: hidden;">
		  <el-header class="d-flex align-items-center" style="background: #545c64;">
			  
			  <a class="h5 text-light mb-0 mr-auto">UNI-ADMINa>
			  
			  <el-menu
			    :default-active="navBarIndex"
			    class="el-menu-demo"
			    mode="horizontal"
			    @select="handleSelect"
			    background-color="#545c64"
			    text-color="#fff"
			    active-text-color="#ffd04b">
			    <el-menu-item index="1">首页el-menu-item>
				<el-menu-item index="1">商品el-menu-item>
				<el-menu-item index="1">订单el-menu-item>
				<el-menu-item index="1">会员el-menu-item>
				<el-menu-item index="1">设置el-menu-item>
			    <el-submenu index="100">
					<template slot="title">
						
						<el-avatar :size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">el-avatar>
						silas
					template>
					<el-menu-item index="100-1">修改el-menu-item>
					<el-menu-item index="100-2">退出el-menu-item>
			    el-submenu>
			  el-menu>
		  el-header>
		  <el-container style="height: 100%;padding-bottom: 60px;">
			
			<el-aside width="200px">
				
			el-aside>
			
			<el-main>
				<li v-for="i in 100" :key="i">{{i}}li>
			el-main>
		  el-container>
		el-container>
	div>
template>

<script>
export default {
    data() {
      return {
        navBarIndex: '1'
      };
    },
    methods: {
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
script>

<style>

style>

下一章节

Vue-cli实战项目10侧边导航开发