vue 点击出现下拉菜单,点击下拉菜单以外都要关闭菜单

​


  2. <template>
  3. <div class="home" v-cloak>
  4.  
  5. <div class="menu">
  6. <p>下拉菜单</p>
  7. <div class="main" v-clickoutside="handleClose">
  8. <button @click="show = !show">点击显示下拉菜单</button>
  9. <div class="dropdown" v-show = "show">
  10. <p>下拉框的内容,点击外面区域可以关闭</p>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20.  
  21. show:false
  22. };
  23. },
  24.  
  25. // 下拉菜单
  26. handleClose(){
  27. this.show = false;
  28. }
  29. },
  30. // 自定义指令clickoutside绑定了一个函数handleClose用来关闭菜单
  31. directives:{
  32. clickoutside:{
  33. bind:function(el,binding,vnode){
  34. function documentHandler(e){
  35. if(el.contains(e.target)){
  36. return false;
  37. }
  38. if(binding.expression){
  39. binding.value(e)
  40. }
  41. }
  42. el._vueClickOutside_ = documentHandler;
  43. document.addEventListener('click',documentHandler);
  44. },
  45. unbind:function(el,binding){
  46. document.removeEventListener('click',el._vueClickOutside_);
  47. delete el._vueClickOutside_;
  48. }
  49. }
  50. }
  51.  
  52. };
  53. </script>
  54. <style lang="less" scoped>
  55. // 作用是取消数据绑定时出现的代码闪烁
  56. [v-cloak] {
  57. display: none;
  58. }
  59. table {
  60. border: 1px solid #e9e9e9;
  61. border-collapse: collapse;
  62. border-spacing: 0;
  63. // 隐藏表格中空单元格上的边框和背景：
  64. empty-cells: show;
  65. }
  66. th,
  67. td {
  68. padding: 8px 16px;
  69. border: 1px solid #e9e9e9;
  70. text-align: left;
  71. }
  72. th {
  73. background: #f7f7f7;
  74. color: #5c6b77;
  75. font-weight: 600;
  76. white-space: nowrap;
  77. }
  78. .menu{
  79. border: 1px solid #ccc;
  80. }
  81. </style>
  82.  
  83.  
  84.  
  85.