Div（包含项目列表）在外部单击时不关闭

Question

请打开https://jsfiddle.net/gfmyt9u8/31/

当用户在<section>标签区域外点击时，打开的div覆盖面板应该关闭。

制作场景的步骤：

• 点击“请选择选项”
• 现在，从打开的覆盖面板中单击第一项（这样做，面板会自动关闭）
• 接下来，再次单击蓝色边框 div 内（这显示“请选择选项”作为标签）
• 现在，尝试在“蓝色边框 div”和“在下面打开 div 覆盖面板”之外单击
• 覆盖面板不会关闭

实际结果：覆盖面板没有关闭

预期结果：在“蓝色边框 div”和“打开覆盖面板”之外单击时，覆盖面板应关闭 下面"

Answer 1

使用mounted生命周期钩子添加一个点击事件监听器来检查点击事件是否在元素之外，并据此隐藏元素。

一个工作示例：

new Vue({
  el: '#app',
  data: {
    displayList: false,
    cat: ['A', 'B']
  },
  methods: {
    itemSelect(o) {
      this.displayList = false;
    }
  },
  mounted: function () {
    
    // Listen to all clicks on the document
    document.addEventListener("click", function(event) {
    
      // If the click inside the element, do nothing
      if (event.target.closest(".section-main")) return;

      // If the clicks outside the element, hide it!
      this.displayList = false;

    }.bind(this));
  }
});

.display-no-selected {  
  cursor: text;
  width: 300px;
  height: 25px;
  border: solid 2px blue;
}
.display-list {
  border: solid 1px wheat;
  width: 300px;
  max-height: 150px;
  overflow-y: auto;
}
.toggle-list {
  display: none;
}
ul, .selected-ul {
  list-style-type: none; 
  margin: 0;
  padding: 0; 
}
ul.inner-ul li {
  cursor: pointer;
  font-weight: normal;
}
ul.inner-ul li:hover {
  background-color: wheat;
}
.default-highlight {
  background-color: wheat;
}
ul.inner-ul li span {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <section class="section-main">
  <div class="display-no-selected" @click="displayList=true"> Please Select Options 
  </div>
  <div class="display-list"
       v-bind:class="{'toggle-list': !displayList}">
    <ul class="inner-first-ul inner-ul">
      <li v-for="o in cat" @click="itemSelect(o)">
        <span>{{o}}</span>              
      </li>
    </ul>
  </div>
 </section>
</div>