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

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

2018-08-29 15:34:55 周家大小姐. 阅读数 5928  收藏 更多

分类专栏： vue2.0 周家大小姐

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_40190624/article/details/82184103

1. <template>

2. <div class="home" v-cloak>

3.  

4. <div class="menu">

5. <p>下拉菜单</p>

6. <div class="main" v-clickoutside="handleClose">

7. <button @click="show = !show">点击显示下拉菜单</button>

8. <div class="dropdown" v-show = "show">

9. <p>下拉框的内容,点击外面区域可以关闭</p>

10. </div>

11. </div>

12. </div>

13. </div>

14. </template>

15. <script>

16. export default {

17. data() {

18. return {

19.  

20. show:false

21. };

22. },

23.  

24. // 下拉菜单

25. handleClose(){

26. this.show = false;

27. }

28. },

29. // 自定义指令clickoutside绑定了一个函数handleClose用来关闭菜单

30. directives:{

31. clickoutside:{

32. bind:function(el,binding,vnode){

33. function documentHandler(e){

34. if(el.contains(e.target)){

35. return false;

36. }

37. if(binding.expression){

38. binding.value(e)

39. }

40. }

41. el._vueClickOutside_ = documentHandler;

42. document.addEventListener('click',documentHandler);

43. },

44. unbind:function(el,binding){

45. document.removeEventListener('click',el._vueClickOutside_);

46. delete el._vueClickOutside_;

47. }

48. }

49. }

50.  

51. };

52. </script>

53. <style lang="less" scoped>

54. // 作用是取消数据绑定时出现的代码闪烁

55. [v-cloak] {

56. display: none;

57. }

58. table {

59. border: 1px solid #e9e9e9;

60. border-collapse: collapse;

61. border-spacing: 0;

62. // 隐藏表格中空单元格上的边框和背景：

63. empty-cells: show;

64. }

65. th,

66. td {

67. padding: 8px 16px;

68. border: 1px solid #e9e9e9;

69. text-align: left;

70. }

71. th {

72. background: #f7f7f7;

73. color: #5c6b77;

74. font-weight: 600;

75. white-space: nowrap;

76. }

77. .menu{

78. border: 1px solid #ccc;

79. }

80. </style>

81.  
82.  
83.  
84.