Vue下拉框点击选中，点击其他区域消失

vue-cli中实现下拉框点击其他区域消失<div class="sn-search-nav">  <a :class="['head-item',{active:first}]" @click="oFirst">排序</a>  <ul class="nav-down" v-if="first">   <li v-for="sort in sorts.defaults" @click="selected(sort)" :class="{active: activeName == sort}">{{sort}}<a v-if="activeName == sort">选中显示</a></li>  </ul></div><script>export default {  name: 'hello',  data () {    return {           show: false      activeName:'',      sorts :{        "defaults":['销量排序','价格从高到低','价格从低到高','评分排序','最新上架']      }    }  },  methods:{
    oFirst(){      this.show=true;    }
    selected(name) {
    this.activeName = name
   }
  },
  mounted() {    document.addEventListener('click', (e) => {       if (!this.$el.contains(e.target)) this.show = false   })  }
}
</script>
点击li时selected函数改变activeName值，li标签中分配的字符与activeName匹配则增加active class名。
点击其他区域的时候利用this.$el.contains(e.target)判断点击区域是否是当前模块