Question

我有一个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组件添加了一个引用。

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>

如何关闭外部v-app上的v-select？

1 个答案: