第一步：vue模块中的内容
第一步，我们在自己的vue模块中整体添加了一个hidePanel事件，准备整体区域进行点击，然后id为myPanel的div是我们要控制它关闭起来的那个小组件。
第二步：定义变量
一直到这一步很多人也都明白，就是平常的东西
第三步：触发hidePanel方法
第三步才是重点，其实大家都知道，要触发一个事件，然后这个事件还是点击事件，点击到我们这个以外的地方才进行一些操作，也就是把赋值为，这一步才是很多人想问的。
我的需求：
- 点击按钮出现下拉列表
- 点击下拉列表外的遮罩区域收起这个下拉列表
（实现下拉列表以及实现下拉列表下的遮罩请移步另一篇博客）
上代码～
由于我加了遮罩，相当于我只需要把hideDropdown这个方法设置到遮罩层上即可，只要点击遮罩的位置就触发这个方法，然后收起下拉列表
另外在查资料的时候，还看到过一种自定义指令的方式，大家也可以尝试一下
这里增加一个选项，就是当我们按下esc键的时候，下拉菜单也可以关闭。
先贴出代码：
其中这里的主要逻辑是：如果点击区域是在元素内部，那么返回。如果绑定了expression，在这里我们需要的是一个函数，那么就执行用户自定义的函数方法。
注意这里的expression可能值有很多，如果你不注意写了其他的那么程序可能不会达到你的预期。
这两个是我们自己声明的变量，因为在vue2.x中不能使用this.xxxx的形式在上下文中声明一个变量，它们的作用是在unbind函数中也就是组件或元素销毁的时候移除事件监听，不然，这些事件监听会一直存在在内存中。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/147672.html