Vue: 下拉菜单

index.html:

    
    
    




    

        

            点击显示下拉菜单
            

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

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);
    },
    undind: function (el, binding) {
        document.removeEventListener('click', el__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
})

index.js:

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

style.css:

[v-clock] {
    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;
}