本文共 1588 字，大约阅读时间需要 5 分钟。

效果

#### 入口页面 index.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;}

转载地址：http://exsqb.baihongyu.com/