怎么编写出vue.js菜单组件

小编给大家分享一下怎么编写出vue.js菜单组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为酒泉企业提供专业的成都做网站、成都网站建设，酒泉网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

写出vue.js菜单组件的方法：首先使用【index.html】编写入口页面；然后使用【clickoutside.js】下拉框组件，代码为【Vue.directive('clickoutside'】；最后实现样式表。

写出vue.js菜单组件的方法：

1、入口页面 index.html

 
 
 
 
 


 

  

   点击显示下拉菜单
   

    
下拉框的内容，点击外面区域可以关闭
   
  
 
 
 
 

2、根实例 index.js

var app = new Vue({
 el: '#app',
 data: {
  show: false
 },
 methods: {
  handleClose () {
   this.show = false;
  }
 }
});

3、下拉框组件 clickoutside.js

Vue.directive('clickoutside',{
 bind: function (el, binding, vnode) {
  function documentHandler(e) {
   if(el.contains(e.target)){
    return false;
   }
   if(binding.expression){
    binding.value(e);
   }
  }
  el.__vueClickOutside__ = documentHandler;
  document.addEventListener('click',documentHandler);
 },
 unbind: function (el, binding) {
  document.removeEventListener('click', el.__vueClickOutside__);
  delete el.__vueClickOutside__;
 }
});

4、样式表

[v-cloak]{
 display: none;
}
.main{
 width: 125px;
}
button{
 display: block;
 width: 100%;
 color: #fff;
 background-color: #39f;
 border: 0;
 padding: 6px;
 text-align: center;
 font-size: 12px;
 border-radius: 4px;
 cursor: pointer;
 outline: none;
 position: relative;
}
button:active{
 top:1px;
 left: 1px;
}
.dropdown{
 width:100%;
 height: 150px;
 margin: 5px 0;
 font-size: 12px;
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.dropdown p{
 display: inline-block;
 padding: 6px;
}

以上是“怎么编写出vue.js菜单组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！