Vue: 下拉菜单

index.html:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="clickoutside.js"></script>
    <script src="index.js"></script>
</body>
</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;
}

Vue: 下拉菜单

index.html:

clickoutside.js:

index.js:

style.css:

推荐阅读更多精彩内容