[英]Vuetify [v-select] trigger when menu is opened
I need help trying to detect the moment when the menu in a select is being opened and shown to the users.我需要帮助来检测 select 中的菜单被打开并向用户显示的时刻。
Is there any method or watch that i can use to trigger the moment when the menu is being displayed?有什么方法或手表可以用来触发菜单显示的那一刻吗?
Here a simple codepen with a v-select.这是一个带有 v-select 的简单代码笔。
codepen.io/xmorelll/pen/bGMppWO?editors=101 codepen.io/xmorelll/pen/bGMppWO?editors=101
Thank you!谢谢!
Did you try @click
event, it is fired when the menu is clicked/opened您是否尝试
@click
事件,单击/打开菜单时会触发它
I found this solution extending the VSelect component from vuetify:我发现这个解决方案从 vuetify 扩展了 VSelect 组件:
import { VSelect } from 'vuetify/lib'
export default {
extends: VSelect,
watch: {
isMenuActive(val) {
this.$emit('openMenu', val);
}
}
}
With this component the VSelect will do an emit when the menu changes his status使用这个组件,当菜单改变他的状态时,VSelect 会发出
Create a variable (which is named toggleSelect
in this example) that will control the visibility of the <v-select/>
and its <v-menu/>
(the dropdown options).创建一个变量(在此示例中名为
toggleSelect
) ,它将控制<v-select/>
及其<v-menu/>
(下拉选项)的可见性。 <v-select/>
has menu-props
which we can use to control the menu's visibility. <v-select/>
有menu-props
可以用来控制菜单的可见性。 For the select field, we can simply use v-if
to hide it.对于 select 字段,我们可以简单地使用
v-if
来隐藏它。
<v-btn
...
@click="toggleSelect = !toggleSelect"
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-select
:items="headers"
v-if="toggleSelect"
:menu-props="{value: toggleSelect}"
/>
data: () => ({
headers: [...],
toggleSelect: false, // let's not show the <v-select/> at first load.
})
Here is an example demo with <v-data-table/>
implementation.这是一个带有
<v-data-table/>
实现的示例演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.