网页中有很多常见的下拉弹窗,比如下图所示的用户信息弹窗:
点击用户头像和名称,会弹出一个下拉菜单,然后点击页面中其它空白区域(除了弹窗本身外),弹窗就关闭了。本示例就用自定义指令来实现这样的需求。
先来分析一下如何实现。
该示例有两个特点,一是点击下拉菜单本身是不会关闭的,二是点击下拉菜单以外的所有区域都要关闭。点击所有区域,可以在 document 上绑定 click 事件来实现,同时只要过滤出是否点击的是目标元素内部的元素即可。
代码如下,只适用于 Vue.js 2.x:
- 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>复制代码
index.js:
var app = new Vue({ el: '#app', data: { show: false }, methods: { handleClose: function () { this.show = false; } } });复制代码
clickoutside.js:
Vue.directive('clickoutside', { bind (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 (el, binding) { 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: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; }复制代码