vue实现点击外部区域关闭下拉框，弹出层等操作

先上图：

（录屏看不到鼠标点击位置，自行复制代码跑，环境vue2.x+iview）
描述需求：有一个下拉菜单，是通过点击按钮弹出的，再次点击按钮获取点击外部区域（除下拉菜单列表的区域）下拉菜单关闭。
实现思路：
1.点击按钮改变下拉菜单显示和隐藏的变量的状态
2.点击外部区域，判断所点击的区域是否点击在外部，可通过判断点击区域是否在下拉菜单列表区域，是，则不是外部区域。不是，则是外部区域，修改隐藏下拉菜单变量的状态。

代码：

<template>
  <div>
    <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px" ref="dropRef">
      <Button type="primary" @click.prevent="handl