项目中有一个需求,点击“设置”按钮后显示下拉菜单,点击页面其他地方后下拉菜单消失。
如下:
按钮代码
<el-button class="set-button" type="primary" size="small" @click="setClick">设置</el-button>
点击事件:
methods:{
setClick(event) {
this.settingMenu = !this.settingMenu
event.stopPropagation()
},
addClick (event) {
event.stopPropagation()
if (!$(event.target).parents().hasClass("menu_dropdown")) {
this.settingMenu = false
}
},
}
mounted: {
document.body.addEventListener('click', this.addClick, false);
},
destroyed() {
document.body.removeEventListener('click', this.addClick, false);
}