如何在v-app外点击关闭v-select？
如何在v-app外点击关闭v-select？
提问于 2019-05-09 02:51:34
我有一个vue应用程序，用户vuetify。该应用程序在现有的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>
这是一个代码链接https://codepen.io/darkopetreski/pen/OGMvop
编辑：
在这里，这似乎被报告为一个错误，建议在根元素中使用https://github.com/vuetifyjs/vuetify/issues/3144 -https://github.com/vuetifyjs/vuetify/issues/3144=“true”，但这种方法并不好，因为它会把事情搞乱(至少对我来说不是很好)。
Stack Overflow用户
回答已采纳
发布于 2019-05-09 04:08:01
这是一个相当老套的解决方案，但似乎是可行的。有两个变化：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56047270
复制相关文章
相似问题
腾讯云开发者
