javascript - 如何在 v-app 外部单击时关闭 v-select？

Question

我有一个用户 vuetify 的 vue 应用程序。该应用程序在现有的 cms 中使用。
打开下拉选择时，在应用程序外部单击不会关闭下拉列表。如果单击在应用程序区域内，则下拉菜单将关闭。

知道如何在应用程序外部单击打开的下拉菜单时触发关闭吗？

new Vue({
  el: '#cartbutton',
  data() {
    return {
      items: [{text:'a'}, {text:'b'}]
    }
  }
})

.existing-cms {
  padding: 40px 50px;
}

#app {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel=stylesheet>

<div class="existing-cms">
  <p>Click on the select dropdown and leave it open.</p>
  <p>
    Click on this white region outside the app should somehow close
    opened select in the app.
  </p>
  
  <div id="cartbutton">
    <v-app>
      <span>Clicking here insde the app closed the opened select</span>
      <br><br>
      <v-select label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
    </v-app>
  </div>
  
</div>

这是一个codepen链接https://codepen.io/darkopetreski/pen/OGMvop

编辑:

似乎这被报告为此处的错误 https://github.com/vuetifyjs/vuetify/issues/3144并且建议是在根元素上使用 data-app="true"，但是这种方法不好，因为它会弄乱一些东西(至少对我来说效果不佳)。

Answer 1

这是一个相当老套的解决方案，但它似乎有效。有两个变化:

1) 添加一个窗口点击监听器，在 v-select 上调用 blur 方法。这隐藏了控件。为了方便起见，我向 v-select 组件添加了一个 ref。

2) 为了防止当他们在应用程序内部或 v-select 上单击时触发此事件，我在容器上添加了一个停止传播 @click.stop。

https://codepen.io/anon/pen/BeoOMz

new Vue({
  el: '#cartbutton',
  data() {
    return {
      items: [{text:'a'}, {text:'b'}]
    }
  },
  mounted() {
    window.addEventListener("click",() => {
       this.$refs.select.blur();
    });    
  }
})

.existing-cms {
  padding: 40px 50px;
}

#app {
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel=stylesheet>

<div class="existing-cms">
  <p>Click on the select dropdown and leave it open.</p>
  <p>
    Click on this white region outside the app should somehow close
    opened select in the app.
  </p>
  
  <div id="cartbutton" @click.stop>
    <v-app>
      <span>Clicking here insde the app closed the opened select</span>
      <br><br>
      <v-select ref="select" label="Click me and leave it opened. Then click in the white region." :items="items"></v-select>
    </v-app>
  </div>
  
</div>