效果
#### 入口页面 index.html
<!DOCTYPE html><html lang="en"><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 class="main" v-clickoutside="handleClose"><button @click="show = !show">点击显示下拉菜单</button><div class="dropdown" v-show="show"><p>下拉框的内容，点击外面区域可以关闭</p></div></div></div><script src="/vue/dist/vue.js"></script><script src="clickoutside.js"></script><script src="index.js"></script></body></html>
根实例 index.js
var app = new Vue({el: '#app',data: {show: false},methods: {handleClose () {this.show = false;}}});
下拉框组件 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__;}});
样式表
[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;}
