写出vue.js菜单组件的方法：首先使用【index.html】编写入口页面；然后使用【clickoutside.js】下拉框组件，代码为【vue.directive('clickoutside'】；最后实现样式表。
【相关文章推荐：vue.js】
本教程操作环境：windows7系统、vue2.9.6版，该方法适用于所有品牌电脑。
写出vue.js菜单组件的方法：
1、入口页面 index.html
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>可从外部关闭的下拉菜单</title> <link rel="stylesheet" type="text/css" href="style.css" ></head><body> <div id="app" v-cloak> <div v-clickoutside="handleclose"> <button @click="show = !show">点击显示下拉菜单</button> <div v-show="show"> <p>下拉框的内容，点击外面区域可以关闭</p> </div> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="clickoutside.js"></script> <script src="index.js"></script></body></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;}
相关免费学习推荐：javascript（视频）
以上就是如何编写出vue.js菜单组件的详细内容。