Vue自定义指令实现可从外部关闭的下拉菜单

最新推荐文章于 2025-05-17 17:05:04 发布

原创最新推荐文章于 2025-05-17 17:05:04 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #directive

vue 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种实现可从外部关闭的下拉菜单的方法，通过Vue.js和自定义指令v-clickoutside，使得点击菜单外的任何区域都能关闭菜单，提供了完整的HTML、CSS和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：点击button弹出下拉菜单，然后点击页面中其他空白区域（除了菜单本身外），菜单就关闭了。

实现思路：(a) 点击下拉菜单本身是不会关闭的

(b) 点击下拉菜单以外的所有区域都要关闭

代码实现：

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" 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.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: function() {
            this.show = false;
        }
    }
})

clickoutside.js

Vue.directive('clickoutside', {
    bind: function(el, binding) {
        function documentHandler(e) {
            //判断点击的区域是否是指令所在的元素内部，如果是，就跳出函数，不往下执行。
            if (el.contains(e.target)) {
                return false;
            }
            //判断当前的指令v-clickoutside有没有写表达式
            if (binding.expression) {
                //binding.value()就是用来执行当前上下文methods中指定的函数的
                binding.value(e);
            }
        }
        //用于在unbind钩子函数中移除对document的click事件监听。
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unbind: function() {
        document.removeEventListener('click', el.__vueClickOutside__);
        //如果不移除，当组件或元素销毁时，它仍存在于内存中
        delete el.__vueClickOutside__;
    }
})

style.css

[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 {
    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, 0.2);
}

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

实现效果：