先上图:
(录屏看不到鼠标点击位置,自行复制代码跑,环境vue2.x+iview)
描述需求:有一个下拉菜单,是通过点击按钮弹出的,再次点击按钮获取点击外部区域(除下拉菜单列表的区域)下拉菜单关闭。
实现思路:
1.点击按钮改变下拉菜单显示和隐藏的变量的状态
2.点击外部区域,判断所点击的区域是否点击在外部,可通过判断点击区域是否在下拉菜单列表区域,是,则不是外部区域。不是,则是外部区域,修改隐藏下拉菜单变量的状态。
代码:
<template>
<div>
<Dropdown trigger="custom" :visible="visible" style="margin-left: 20px" ref="dropRef">
<Button type="primary" @click.prevent=&