vue 点击空白 隐藏div

 我是一个 browBox 里的ul li 循环遍历内容 点击li 内容 browBox 隐藏 然后点击表情打开div 点击空白browBox 隐藏 

<div class="browBox" :class="[charShow?'show':'hidden']">
    <ul>
        <li id="charli" v-for="(item,index) in faceList" :key="index" @click="getBrow(index, $event)">{
  {item}}</li>
    </ul>
</div>
<div class="expression" @click="charShowFn($event)"><img :src="smilingFace" alt="表情">表情</div>

 

charShow: false,

 

charShowFn(event){ // 点击div 显示
        this.charShow = !this.charShow
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
        document.addEventListener('click', ()=> {
          var sp = document.getElementById("charli");
          if(sp){