I need a way to trigger the <select> or <b-form-select> and display the list of dropdown options on mouse hover. Without using JQuery or any external plugin other than Vue.js.
-
This looks similair: stackoverflow.com/questions/59542120/…dominikjosch– dominikjosch2022-01-24 09:29:14 +00:00Commented Jan 24, 2022 at 9:29
-
@dominikjosch cannot get the same methods to work for the <b-form-select> component.Dahlin Carneiro– Dahlin Carneiro2022-02-01 05:48:59 +00:00Commented Feb 1, 2022 at 5:48
Add a comment
|
2 Answers
As per my understanding you want to show/hide the <b-form-select> on mouseover and mouseleave event. If Yes, I have few suggestions :
- Use a div as a wrapper which will trigger the
mouseoverandmouseleaveevents. We can directly trigger the mouse events by appending thenativein the itself but once it will hide, there will be no way to get the dropdown back on mouseover again. - You can simply show/hide the dropdown via
v-showdirective. We can easily set the value from our mouse events.
Working Demo :
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
<div class="wrapper-div" @mouseover="onOver" @mouseleave="onLeave">
<b-form-select
v-model="selected"
:options="options"
v-show="isVisible">
</b-form-select>
</div>
</div>
Comments
The effect of this solution is similar to opening the select by clicking on it (although, not the same ...)
<template>
<select ref="mySelect" @mouseenter="hover(true)" @mouseleave="hover(false)" :size="size">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</template>
<script>
import {ref} from 'vue';
export default {
name: "Test",
setup(){
const mySelect = ref();
const size = ref('0');
return {mySelect, size}
},
methods: {
hover(val) {
this.size = val ? this.mySelect.length.toFixed(0) : '0';
}
}
}
</script>
Comments
