How to open select dropdown on hover using Bootstrap Vue
P粉6355097192024-03-26 14:04:58
0
1
392
I need a way to trigger <select> or <b-form-select> and show a dropdown list of options on mouseover. No use of JQuery or any external plugins other than Vue.js.
From my understanding, you want to show/hide <b-form-select> on the mouseover and mouseleave events. If so, I have some suggestions:
Use a div as a wrapper, this will trigger the mouseover and mouseleave events. We can fire the mouse event directly by appending native to itself, but once hidden there is no way to restore the dropdown on mouseover again.
You can simply show/hide the drop-down list via the v-show directive. We can easily set the value via mouse events.
Working Demonstration:
new Vue({
el: '#app',
data() {
return {
selected: null,
isVisible: true,
options: [
{ value: null, text: 'Please select an option' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Selected Option' },
{ value: { C: '3PO' }, text: 'This is an option with object value' },
{ value: 'd', text: 'This one is disabled', disabled: true }
]
}
},
methods: {
onOver() {
this.isVisible = true;
},
onLeave() {
this.isVisible = false;
}
}
})
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
From my understanding, you want to show/hide
<b-form-select>on themouseoverandmouseleaveevents. If so, I have some suggestions:mouseoverandmouseleaveevents. We can fire the mouse event directly by appendingnativeto itself, but once hidden there is no way to restore the dropdown on mouseover again.v-showdirective. We can easily set the value via mouse events.Working Demonstration:
new Vue({ el: '#app', data() { return { selected: null, isVisible: true, options: [ { value: null, text: 'Please select an option' }, { value: 'a', text: 'This is First option' }, { value: 'b', text: 'Selected Option' }, { value: { C: '3PO' }, text: 'This is an option with object value' }, { value: 'd', text: 'This one is disabled', disabled: true } ] } }, methods: { onOver() { this.isVisible = true; }, onLeave() { this.isVisible = false; } } }).wrapper-div { height: 20px; }