menu:vue component+bootstrap

by cactus77kiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>      
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div>
  <nav class="navbar navbar-expand-md navbar-light mb-4 fixed-top" style="background-color: #A9DEF7;" v-cloak id="appmenu">
    <!--系統名稱-->
    <a class="navbar-brand" href="#">財務人事系統</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!--功能選單-->
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown" v-for="(item,index) in menuVal">
          <a class="nav-link " v-bind:class="[(item.subpool == null) ? '' : 'dropdown-toggle']" data-toggle="dropdown"  v-bind:href="item.url" >          
          {{item.menutext}}
          </a>
          <gb-sub-menu :menudata="item"></gb-sub-menu>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS

/*---------Navbar is fixed to the top---------*/
body {
  min-height: 75rem;
  padding-top: 4.5rem;
} 
/*---------bs dropdown 3-level menu---------*/
  /* @media (min-width: 992px){   */
	.dropdown-menu .dropdown-toggle:after{
		border-top: .3em solid transparent;
	    border-right: 0;
	    border-bottom: .3em solid transparent;
	    border-left: .3em solid;
	}
	.dropdown-menu .dropdown-menu{
		margin-left:0; margin-right: 0;
	}
	.dropdown-menu li{
		position: relative;
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
/*}*/
/*---------v-cloak----------*/
[v-cloak] {
    display: none !important;
}

JavaScript

Vue.component('gb-sub-menu', {
	props:{
  	menudata:{type: Object},
    menulevel:{	//目前menu所在分層
    	type:Number,
      default: 1
    }
  },  
  template: `<ul class="dropdown-menu" 
                 v-if="menudata.subpool !=null && menudata.subpool.length > 0"
                 v-bind:class="[(Number(menulevel) > 1 ) ? 'submenu' : '']">
              <li v-for="x in menudata.subpool">                  
                <a v-if="x.bar == null" class="dropdown-item" v-bind:href="x.url" >{{x.menucode}} {{x.menutext}}
                	<i class="fa fa-caret-right" aria-hidden="true" v-if="x.subpool!=null && x.subpool.length > 0"></i>
                </a>
                <hr v-else class="dropdown-divider"/>
                <gb-sub-menu :menudata="x" :menulevel="submlevel"></gb-sub-menu>
              </li>
            </ul>`,  
  data: function () {
    return {      
      submlevel: Number(this.menulevel) +1
    }
  },
  methods: {},
  created: function(){}
});

var vapp = new Vue({
	el: '#appmenu',
  data: {
  	menuVal:[],
  },
  methods:{
  	getmenu: function(){
    	var menudata = [
  {
    "munuid": 2,
    "menucode": "",
    "menutext": "人事",
    "url": "#",
    "bar": null,
    "disabled": false,
    "subpool": [
      {
        "menuid": 6,
        "menucode": "",
        "menutext": "一、主檔維護作業",
        "url": "#",
        "bar": null,
        "disabled": false,
        "subpool": [
          {
            "menuid": 10,
            "menucode": "PRF1050",
            "menutext": "參數資料維護",
            "url": "FP_PS/CodeMaintain",
            "bar": null,
            "disabled": false,
            "subpool": []
          },
          {
            "menuid": 11,
            "menucode": "",
            "menutext": "部門基本資料維護",
            "url": "#",
            "bar": null,
            "disabled": false,
            "subpool": [
              {
                "menuid": 110,
                "menucode": "PRF1050",
                "menutext": "參數資料維護二",
           ...