vue実用的なメニュープラグイン

メインメニューボタンvue-quick-menu
             github:https://github.com/AshleyLv/vue-quick-menu/blob/master/example/src/demo.vue
 
 

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;
    }
  }
}