vue实用的菜单插件

主菜单按钮 vue-quick-menu    

             github：https://github.com/AshleyLv/vue-quick-menu/blob/master/example/src/demo.vue

 

 

<template>
  <div class="header">
     <!-- long and menu -->
     <div class="menu">
       <p>logo</p>
      
        <div class="menuBox">
          <div @click="showMask">
            <quick-menu :menu-count=getCount
              :icon-class="icons"
              :position="position" 
              :backgroundColor="backgroundColor"
              :color="color"
               @process=print
              :list="list"
              :is-open-new-tab=getIsOpenNewTab
              :menu-url-list="list">
            </quick-menu>
          </div>
          <div class="bg" v-if="bgshow"></div>
        </div>
      
     </div>
     <!-- 导航列表 navlist -->
     <ul class="navlist">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
     </ul>
  </div>
</template>

<script>
import quickMenu from 'vue-quick-menu'
import 'font-awesome/css/font-awesome.min.css'
export default {
  name: 'HelloWorld',
  components:{
    quickMenu
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      bgshow:false,
      count:4,
      icons:[
        "fa fa-home",
        "fa fa-commenting",
        "fa fa-user-circle-o",
        "fa fa-building-o",
      ],
      list:[
        {isLink:false,url:'/Test2'},
        {isLink:false,url:'/Test2'},
        {isLink:false,url:'/Home'},
        {isLink:false,url:'/Home'},
      ],
      backgroundColor:'#42b983',
      color:'#eee',
      position:'top-right',
      isOpenNewTab:false,
    }
  },
  computed:{
    getCount(){
      return Number(this.count)
    },
    getIsOpenNewTab(){
      // isOpenNewTab 打开新的窗口来展示页面，默认关闭
      return Boolean(this.isOpenNewTab)
    }
  },
  methods:{
    print:function(key){
      console.log("key : " + key)
      if(key===0){
        this.$router.push({path:'/'})
        this.bgshow=!this.bgshow;
          // window.open('https://github.com/AshleyLv/vue-quick-menu')
      }
      if(key===1){
        this.$router.push({path:'/Test2'})
        this.bgshow=this.bgshow;
          // window.open('https://github.com/AshleyLv/vue-quick-menu')
      }
      
      if (key) {
        this.bgshow=!this.bgshow;
      }
    },
    showMask:function(){
      this.bgshow=!this.bgshow;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.header{
  width: 100%;
  position: relative;
}
.menu{
  height: 6vh;
  border: 1px solid #ddd;
 /* display: flex;
  justify-content: space-between;
  align-items: center;*/
  padding: 0 0.3rem;
}
ul.navlist{
  height: 12vh;
  /*background-color: #f3f3f3;*/
  /*border: 1px solid red;*/
  position: absolute;
  top: 0;
  z-index: 1000;
  width: 60vw;
  margin: 0 20vw;
  display: flex;
  justify-content: center;
  background-image: url('../../../static/header/topbg.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
ul.navlist>li{
  width: 20%;
  height: 80%;
  border: 1px solid #ddd;
  opacity: 0;
}

/*菜单设置 menu set*/

.bg{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11000;
}
.quick-menu{
  top: 0.3rem!important;
  right: 0.3rem!important;
  z-index: 11000222!important;
}
.quick-menu, .quick-menu>.menu{
  height: 2rem!important;
  width: 2rem!important;
  box-shadow: none!important;
}
.quick-menu .sub-menu{
    height: 2rem!important;
  width: 2rem!important;
  /*left: -88px!important;*/
  font-size: 20px;
}
.quick-menu .sub-menu a{
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}
.quick-menu .sub-menu a i{ 
  font-size: 19px!important;
  margin-top: 0!important;
}
.quick-menu>.menu .core-menu{
  height: 2rem!important;
  width: 2rem!important;
  text-align: center!important;
  
}
.quick-menu>.menu .core-menu .bar, .quick-menu>.menu .core-menu .bar:after, .quick-menu>.menu .core-menu .bar:before{
  width: 1.2rem!important;
  height: 2px!important;
}
.quick-menu>.menu .core-menu .bar{
  position: relative;
  display: flex!important;
  justify-content: center!important;
  text-align: center!important;
  left: 6px!important;
}
.quick-menu.active .menu .bar{
  margin-left: 0!important;
}
</style>