Vue 自定义下拉菜单指令

by deniro

HTML

<div id="app" v-cloak>
        <div class="main" v-outside-click.esc="close">
            <button @click="isShow=!isShow">点击</button>
            <div class="dropDown" v-show="isShow">
                <p>零售新物种：药店和便利店合体之后</p>
            </div>
        </div>
    </div>

CSS

[v-cloak] {
    display: none;
}

.main {
    width: 125px;
}

button {
    display: block;
    width: 100%;
    color: #ffffff;
    background-color: #99CC66;
    border: 0;
    padding: 6px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    outline: none;
}

button:active {
    top: 1px;
    left: 1px;
}

.dropDown {
    width: 100%;
    height: 150px;
    margin: 5px 0;
    font-size: 12px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.dropDown p {
    display: inline-block;
    padding: 6px;
}

Vue

Vue.directive('outside-click', {
    bind: function (el, binding, vnode) {
        //定义点击函数
        function clickHandler(e) {

            //是否开启开关
            var escSwitch = (binding.modifiers && binding.modifiers.esc);

            if (el.contains(e.target)) {//如果点击区域在所在指令元素内部时
                if (escSwitch && e.keyCode === 27) {//带有了 esc 修饰符，则让程序往下执行
                } else {//直接返回
                    return false;
                }
            }
            if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
                binding.value(e);
            }
        }

        el.vueOutsideClick = clickHandler;
        document.addEventListener('click', clickHandler);//绑定到 document 的点击事件
        document.addEventListener('keyup', clickHandler, false);//绑定键盘事件
    },
    unbind: function (el, binding, vnode) {
        document.removeEventListener('click', el.vueOutsideClick);//解绑
        document.removeEventListener('keyup', el.vueOutsideClick);//解绑
        delete el.vueOutsideClick;//销毁
    },
    update: function (el, binding, vnode) {
        console.log("oldValue:" + binding.oldValue);
        console.log("value:" + binding.value);
    }

});

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