如何阻止 v-click-outside 在内部 v-select 组件上触发

Question

我一直在尝试制作一个卡片组件，如果您单击外部的任何位置，该组件就会关闭。但问题是，当我单击该卡内的 v-select 下拉菜单中的项目时，会触发 v-click-outside。如何防止子组件触发 v-click-outside？

<v-card v-click-outside="handleClickOutside">
   <v-select
     :items="items"
     v-model="currentItem"
   ></v-select>
</v-card>

Answer 1

根据v-click-outside 文档，它接受“回调或选项对象”。对象看起来像这样：

{
  handler: (e: Event) => void,
  closeConditional ? : (e: Event) => boolean,
  include ? : () => HTMLElement[]
}

为了handler传递你的函数并且include你必须指定 HTML 元素（示例）。为了防止v-click-outside在使用时触发，v-select您需要包含.v-select-list.

在您的情况下，解决方案将如下所示：

<v-card v-click-outside="{
    handler: handleClickOutside,
    include: includeFunction
}">
...

<script>
  ...
  methods: {
    includeFunction(){
        //visible elements
        const tempArray = [document.querySelector('.included')]
         
          if (document.querySelector('.v-select-list')) {
            //push the element to array when it is visible
            arr.push(document.querySelector('.v-select-list'))
            
          }
          return tempArray
    }
    ...
  }
</script>